[JS]タイル状に配置した画像やテキストをランダムな順番でふわりと表示するスクリプト -champagne.js
グリッドに沿ってタイル状に配置した画像やテキストなどのエレメントをランダムな順番でふわりと表示するjQueryのプラグインを紹介します。 champagne.jsを実際に使用しているサイト「Perkstreet」 [ad#ad-2] champagne.jsの使い方 champagne.jsは、3ステップで簡単に実装できます。 画像やテキストをタイル状にCSSで実装。 jQueryと当スクリプトをインクルード。 親エレメントをjQueryのセレクタで指定し、スクリプトを実行。 下記に、デモページを例に実装方法を紹介します。 外部ファイル 「jquery.js」と当スクリプトを外部ファイルとして記述します。 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery
[JS]ウェーブ状のアニメーションでフェードイン・アウトさせる超軽量スクリプト -WaveAnimate
エレメントをウェーブ状のアニメーションでフェードイン・フェードアウトさせるjQueryのプラグインを紹介します。 スクリプトは1.7kで超軽量です。 WaveAnimate jQuery Plugin デモ [ad#ad-2] WaveAnimateのデモ デモでは3通りのアニメーションがあり、上キャプチャのものは端のエレメントから順番にフェードします。 エレメント（右端の赤）を除外し、アコーディオンのようなアニメーションを適用することもできます。 赤いエレメントを除外したデモ WaveAnimateの実装 デモを例に、実装方法を紹介します。 HTML デモではdiv要素で実装したボックスを配置しているだけです。 <div id="demo1"> <div id="el1a" class="fademe"> </div> <div id="el2a" class="fademe"
[JS]複数のエレメントをフェードのアニメーションで華麗に表示するスクリプト
Display Elements Sequentially with jQuery デモページ [ad#ad-2] 実装は非常にシンプルです。 HTML デモでは、画像をリスト要素で配置しています。 <ul> <li><img src="image.jpg" /></li> <li><img src="image.jpg" /></li> <li><img src="image.jpg" /></li> <li><img src="image.jpg" /></li> <li><img src="image.jpg" /></li> <li><img src="image.jpg" /></li> </ul> HTML アニメーションのトリガーとなるのは、「Show Images」のテキストリンクを使用しています。 <p style="clear: both; display: none;
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
