最初に必要なものだけ効果的に見せるAppleサイト風エフェクト実装jQueryプラグイン「Apple Effect」:phpspot開発日誌
最初に必要なものだけ効果的に見せるAppleサイト風エフェクト実装jQueryプラグイン「Apple Effect」 2010年12月06日- jQuery Apple Effect 最初に必要なものだけ効果的に見せるAppleサイト風エフェクト実装jQueryプラグイン「Apple Effect」。 最近Appleのサイトを見たことがある方なら分かると思いますが、最初に1枚の画像を表示しておいて、ナビゲーションなんかは少し待たせて、フェードインしながら表示するというカッコいい効果を作れます。 最初に1枚の画像を表示 フェードインしながらナビゲーションを表示する こちらのデモで動きを確認 実装は1行。 $('#target').appleEffect(); オプションを渡すことでアニメーション開始までの時間を設定したり、コールバック関数を指定できたりします。 ちょっとめんどくさそうなこの機
jQuery Mobile Alpha 1 Released | jQuery Mobile
Today we’re pleased to announce the first alpha release of the jQuery Mobile project. jQuery Mobile is a user interface framework, built on top of jQuery, designed to simplify the process of building applications that target mobile devices. We’ve made really good progress since we first announced the project two months ago. We’ve created a number of components, layouts, and theming tools to greatl
jQueryとAjaxで作るスムーズページング (1/3)
Googleの検索結果のように、長いリスト項目を複数のページに分割して表示することを「ページング」（Paging）と言います。ページング処理では下部にナビゲーションリンクを配置し、クリックされた番号のページを表示しますが、ページ全体をリロードして切り替えるには時間がかかります。そこで今回は、スムーズにページングさせるためにAjaxを利用して更新が必要な部分のみを外部ファイルから読み込んで書き換え、ユーザーのストレスを軽減する方法を紹介しましょう。 データのHTMLを用意する 今回は、数が多い商品情報のリストを複数のページに分割して表示するサンプルを作成します。はじめにAjaxで読み込むコンテンツデータを用意します。Ajaxは、XMLやJSON（JavaScript Object Notation）、テキストなどさまざまデータを扱えますが、今回はもっとも手軽なHTMLを使いましょう。コンテン
150 best jQuery effects for web designers and developers « Web Design Blog – WebDesignShock
Since the arrival of the jQuery library, the life of JavaScript programmers have gotten a lot easier because now it’s simpler to develop web 2.0 applications. With jQuery, the programmers can keep their code organized and concise, which is the major slogan of the library, “write less, do more”. You can utilize jQuery to handle events, generate animations, and even add an Ajax support into your web
[jQuery]本格LPOを手軽に実践 – jLPO地域/検索ワード/新規・リピーター等でコンテンツを切り替えるjQueryプラグイン | レポート | 日本電子工藝社
LPO（Landing Page Optimization）とは Webサイトの中でユーザーが最初に開くページ（ランディングページ）を、アクセスしてきた条件により変化させることで、ユーザーを到達させたいページ・アクションへ導く手法のことです。 ページに訪れた際の検索キーワードや、広告を掲載していたページ（参照元URL）などにより振り分けるのが一般的ですが、ユーザーの地域・新規訪問かリピーターか・最終アクセスからの経過時間・アクセスした曜日・時間帯などによりターゲットを絞り込むことも、狙いによっては効果的です。 jLPOでできること 上で挙げたターゲティング表示機能のすべてが、jQueryのプラグインとしてLPOツールが簡単かつ無料で利用できます。高コストだった地域による絞込みも、GoogleAPIの利用で実現しました。（対応する地域の精度はGoogleAPIの機能に依存します。） 適用箇所
Fancybox - Fancy lightbox alternative
This site is kept for historical purposes and represents original version of the Fancybox. Check out the latest - Fancybox v5 What is it? FancyBox is a tool for displaying images, html content and multi-media in a Mac-style "lightbox" that floats overtop of web page. It was built using the jQuery library. Licensed under both MIT and GPL licenses Features Can display images, HTML elements, SWF movi
第9回 ページ内リンクをスムーズにスクロールさせるには | gihyo.jp
ease系のJavaScriptプラグインで気持ちいい動きを演出 1ページの中に複数のページ要素を配置し、ページ内リンクで移動するタイプのサイトを目にするようになってきました。たとえば2007年度のグッドデザイン賞 コミュニケーションデザイン部門を受賞した石川県の温泉「多田屋」のサイトは、Flashを使い、1枚の大きな絵の中をスクロールして移動するUIとなっています。 図1 石川県の温泉「多田屋」のサイト 最近では、Flashではなく、JavaScriptを使って静的なページの中を遷移するタイプのサイトも見かけるようになりました。たとえば「Pline Studios of Architecture」はとても美しいUIとなっています。 図2 JavaScriptでページ内を移動する「Pline Studios of Architecture」 実装にはMITライセンスのscrollto.js
jQuery UIのウィジェットを使ってみよう
対象読者 jQuery UIに興味があり、使ってみたいと思っている方 必要な環境と準備 jQuery UIのダウンロード 執筆時点のjQuery UIの最新版は、1.8.2です。第1回を参考にダウンロードしましょう。 Dialog Dialogは、ユーザのアクションに対して、警告、問い合わせなどのダイアログを表示させたいときに利用します。例えば、ユーザ登録時に「登録します。よろしいですか？」といったメッセージや、データを削除させる時に「削除しますが、よろしいですか？」などのメッセージを表示させることができます。 今回は、ボタンをクリックすると、［OK］と［キャンセル］ボタンが配置されたダイアログが表示されるサンプルを取り上げます。 リスト1にDialogプラグインの使用例を、図1、図2に実行結果を示します。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML
[チュートリアル]jQueryでページの所定位置まで来たら要素表示 via could
twitter facebook hatena google pocket 長谷川恭久（@yhassy）さんのブログcouldで使用されているscriptがよかったので紹介します。 なお、コンテンツも非常に読み応えがあるので、購読をお勧めします。 さて、couldでは、記事詳細を読み進め、ある位置までくると上からソーシャルブックマーク系が降りてきます。 記事後半まで読んでくれた意欲の高い人に対しアピールが出来、ソーシャルメディア上の伝播がより期待できます。 購入ボタンやお問合せボタンなどを置いてもいいかもしれません。 わりとシンプルな記述なので、苦労なく導入できると思います。 sponsors 使用方法 jQueryからjquery.jsをダウンロードします。 ■JavaScriptの記述 <script type="text/javascript" src="jquery-1.4.2.m
![[チュートリアル]jQueryでページの所定位置まで来たら要素表示 via could](https://cdn-ak-scissors.b.st-hatena.com/image/square/11ca1ab33e936fcf16e770dfbd7067653fbb7d52/height=288;version=1;width=512/http%3A%2F%2Fwww.skuare.net%2Fassets_c%2F2010%2F09%2FjslideBox-thumb-300x200-514.jpg)
jQuery ソースコードを読むための参考資料一覧 - mollifier delta blog
2010/09/26(日) に京都で Kanasan.JS jQuery コードリーディング #2 が行われる(告知ページ)。みんなで jQuery のソースコードを読むイベントで、今回が2回目だ。参加者募集中です。 jQuery はファイル1つだけのライブラリなのですごい環境とかもってなくても大丈夫なんだけど、読むうえで参考になるサイトとかをまとめてみた。この辺の準備をしておくと理解が深まると思う。 ソースコード http://code.jquery.com/jquery-1.4.2.js http://github.com/jquery/jquery まずは jQuery のソースコードを取ってこないと始まらない。今回はバージョン 1.4.2 を使用する。jQuery の公式サイトから圧縮していないコードをダウンロードしよう。 それと、jQuery ソースコードは Git で管理されて
14のjQueryベストプラクティス[to-R]
14のjQueryベストプラクティス 原文:14 Helpful jQuery Tricks, Notes, and Best Practices 良かったので翻訳してみました。かなりの意訳で、上手に訳せてない箇所も多いので詳しくは原文を参照してください。 1.メソッドはjQueryオブジェクトを返す ほとんどのメソッドがjQueryオブジェクトを返すのが重要です。 これにより次のようなメソッドチェーンが可能になっています。 $someDiv .attr('class', 'someClass') .hide() .html('new stuff'); jQueryオブジェクトを返すのがわかっていれば次のように分割して書くことも出来ます。 var someDiv = $('#someDiv'); someDiv.hide(); 次のように一行で書くことも出来ます。 var someDiv
![14のjQueryベストプラクティス[to-R]](https://cdn-ak-scissors.b.st-hatena.com/image/square/a9717624309e36a795026e1b70982163687ccca2/height=288;version=1;width=512/https%3A%2F%2Fblog.webcreativepark.net%2Ficon_200x200.png)
Full Page Image Gallery with jQuery | Codrops
In this tutorial we are going to create a stunning full page gallery with scrollable thumbnails and a scrollable full screen preview. The idea is to have a thumbnails bar […] In this tutorial we are going to create a stunning full page gallery with scrollable thumbnails and a scrollable full screen preview. The idea is to have a thumbnails bar at the bottom of the page that scrolls automatically w
Slideshows and sliders made the jQuery way: 25 winning scripts - FrancescoMugnai.com
Galleria Documentation: http://devkick.com/lab/galleria/ Demo: http://devkick.com/lab/galleria/demo_01.htm#img/grass-blades.jpg License: GPL s3Slider jQuery plugin Documentation: http://www.serie3.info/s3slider/ Demo: http://www.serie3.info/s3slider/demonstration.html License: Creative Commons Attribution 2.5 jQuery Coda Slider Documentation: http://jqueryfordesigners.com/coda-slider-effect/ Demo:
9 Simple CSS & JS Snippets for Creating Beautiful Tabs – Speckyboy
Tabs are a fundamental part of the web, and they’ve been around for years, but with even more developers going open source there’s a whole world of free code snippets out there. If you’re building a tabbed widget, you could always start from scratch, or you could rework someone else’s code and style the element to fit your project. That’s why I’ve created this collection of the best-tabbed widget
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
988 + JavaScript Libraries : skuare.net
dvq.co.nz
龙岩僖窘科技股份有限公司
https://chriswanstrath.com/facebox/
steamdev.com
HTML5 User Experience Design - ＠IT