
【フェーダー】画像の表示・非表示にプラグインを利用【jquery.waypoints.min.js】
jQueryプラグインのjquery.waypoints.min.jsを利用します。特定の要素に対し、ブラウザの縦方向の画面位置を指定して上方向のスクロールと下方向のスクロールに分けて処理が実行できます。下方向のスクロールでは画像を順番にフェードイン、上方向のスクロールでは画像を非表示にする、イメージフェーダーのサンプルです。
jQueryプラグインのjquery.waypoints.min.jsを利用します。特定の要素に対し、ブラウザの縦方向の画面位置を指定して上方向のスクロールと下方向のスクロールに分けて処理が実行できます。下方向のスクロールでは画像を順番にフェードイン、上方向のスクロールでは画像を非表示にする、イメージフェーダーのサンプルです。
左から右へカーテンを開くように画像が順番に表示される、イメージフェーダーのサンプルです。jQueryでaddClassして、CSSのanimationで動きを実装しています。
jQueryプラグインのgranim.jsを利用します。画像にグラデーションのアニメーション効果を実装できます。
jQueryプラグインのjquery-numerator.jsを利用します。テキストの数値をアニメーションでカウントアップして表示します。
画像のスライドショーはスライダーを使うのが一般的ですが、スライダーを使わずに自作のjQueryで実装します。
ページ表示時にタイプライター風にテキストを表示します。カーソルの点滅動作はCSSで実装します。
フェードインでニュースティッカーを表示させ、5秒後にニュースのテキストが左に流れていきます。全てテキストが流れた後に、次のテキストがフェードインで表示されます。
フェードインで表示するニュースティッカーを、プラグインを利用せずシンプルなjQueryの記述で実装しています。サンプルは画像上に透過の背景色を乗せ、その上にニュースティッカーを表示させています。
jQueryプラグインのtextillate.jsを利用します。テキストに様々なエフェクトを付けて表示ができます。textillate.js、lettering.js、animate.cssを読み込んで実装します。
jQueryプラグインのjquery.inview.jsを利用します。特定の要素に対し、ブラウザの表示領域内と表示領域外に分けて処理が実行できます。ブラウザの表示領域内では画像を順番にフェードイン、表示領域外では画像を非表示にする、イメージフェーダーのサンプルです。