フェーダー

フェーダー

【フェーダー】画像の表示・非表示にプラグインを利用【jquery.waypoints.min.js】

jQueryプラグインのjquery.waypoints.min.jsを利用します。特定の要素に対し、ブラウザの縦方向の画面位置を指定して上方向のスクロールと下方向のスクロールに分けて処理が実行できます。下方向のスクロールでは画像を順番にフェードイン、上方向のスクロールでは画像を非表示にする、イメージフェーダーのサンプルです。

フェーダー

【フェーダー】左から右へカーテンを開くように画像を順番に表示

左から右へカーテンを開くように画像が順番に表示される、イメージフェーダーのサンプルです。jQueryでaddClassして、CSSのanimationで動きを実装しています。

フェーダー

【フェーダー】画像にグラデーションのアニメーション効果を実装するプラグイン【granim.js】

jQueryプラグインのgranim.jsを利用します。画像にグラデーションのアニメーション効果を実装できます。

フェーダー

【フェーダー】プラグインを利用して数値をカウントアップ表示【jquery-numerator.js】

jQueryプラグインのjquery-numerator.jsを利用します。テキストの数値をアニメーションでカウントアップして表示します。

フェーダー

【フェーダー】スライダーを使わずにjQueryでスライドショーを実装

画像のスライドショーはスライダーを使うのが一般的ですが、スライダーを使わずに自作のjQueryで実装します。

フェーダー

【フェーダー】タイプライター風にテキストを表示

ページ表示時にタイプライター風にテキストを表示します。カーソルの点滅動作はCSSで実装します。

フェーダー

【フェーダー】テキストが左に流れるニュースティッカー

フェードインでニュースティッカーを表示させ、5秒後にニュースのテキストが左に流れていきます。全てテキストが流れた後に、次のテキストがフェードインで表示されます。

フェーダー

【フェーダー】フェードインで表示するニュースティッカー

フェードインで表示するニュースティッカーを、プラグインを利用せずシンプルなjQueryの記述で実装しています。サンプルは画像上に透過の背景色を乗せ、その上にニュースティッカーを表示させています。

フェーダー

【フェーダー】プラグインを利用してテキストをエフェクト表示【textillate.js】

jQueryプラグインのtextillate.jsを利用します。テキストに様々なエフェクトを付けて表示ができます。textillate.js、lettering.js、animate.cssを読み込んで実装します。

フェーダー

【フェーダー】画像の表示・非表示にプラグインを利用【jquery.inview.js】

jQueryプラグインのjquery.inview.jsを利用します。特定の要素に対し、ブラウザの表示領域内と表示領域外に分けて処理が実行できます。ブラウザの表示領域内では画像を順番にフェードイン、表示領域外では画像を非表示にする、イメージフェーダーのサンプルです。

タイトルとURLをコピーしました