0

スクロールをキーとしたアクションを「waypoints.js」で実現

スクロールをキーとしたアクションを「waypoints.js」で実現

画面をスクロールをすることで、ナビゲーションを上部固定する方法のひとつとして、jQueryプラグインの「waypoints.js」をご紹介します。上部ナビ固定をする方法は、これまでもいくつかご紹介させて頂きましたが、今回はアニメーションエフェクトを実現出来るので参考にしてみてください。

 

 

DEMO

 

簡単に言ってしまうと、デフォルトのCSSに追加で別のクラス名を付けた指定を追加・削除することで表示を変化させていきます。

それでは実際に見ていきましょう。

 

1.jquery.waypoints.jsをダウンロード

本家サイトより「jquery.waypoints.js」をダウンロードします。

waypoints

 

waypoints-file

「lib」の中の「jquery.waypoints.js」を利用します。
配置する場所は、サンプルとして「js」フォルダの中に入れておきます。

 

2.HTMLを記述

headerの中にli要素で5つナビゲーションを並べています。

 

3.jQueryとwaypoints.jsを読み込む

 #changeという要素が、ウィンドウの上部に重なった時、headerという要素に.pointを追加するという指示になります。

 

4.CSSを記述

 

5.スライドする動きをつけてみる

ナビゲーションが変化する際のエフェクトとして、スライドしながら表示・非表示するようなオプションを追加してみましょう。

DEMO

 

 

if文で分岐させてエフェクトを切り替えています。最近良く見かけるナビゲーションのスタイルなので、色々な場面で活用できそうですね。

 


 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

mororeco > jQuery > スクロールをキーとしたアクションを「waypoints.js」で実現