Scrolling_Progress_Barのデモページ

【jQuery】スクロールとプログレスバーがシンクロするプラグイン!Scrolling Progress Bar

2014.09.13   609


スクロールをするとプログレスバーのレベルが上がっていく。
セクション毎にプログレスバーが準備され、セクションをスクロールで通過するとチェックアイコンが付く。
セクション分けしたページを順番に上から読ませたい時に最適なjQueryプラグインのScrolling Progress Bar!


 

Scrolling Progress Barのデモ


 

Scrolling Progress Barサイト

 

Scrolling Progress Barの使い方

それではScrolling Progress Barプラグインの使い方を見ていきましょう。
それぞれのコードを載せますね。

HTMLコード

CSSコード

JavaScriptコード

 

チェックポイント

デモではプログレスバーのチェックアイコンはFont Awesome Iconsを使用しておりますが、各自お好みで画像や他フォントアイコンなど変更してくださいね。
また各セクションは画像にしていますが、もちろん文章などなんでも好きなもので大丈夫です。

 

プラグインへ一言

スクロールしてチェックが付くとなぜか嬉しい気持ちになるのは自分だけじゃないはず

 

Feedlyで最新プラグインをチェック

follow us in feedly

良ければフォローもお待ちしております