jquery
2015/02/3更新 最新情報に合わせてリライトしました。

当記事は最新版waypoints.js 3.x系の記事です。
2.x系までは、jQueryを利用必須のプラグインとして公開されていましたが、3.x系からjQueryを利用しなくとも動作するプラグインとなり挙動対象が+IE9となりました。IE8対応が多いわたくしは泣きそうになりました…が、ちゃんとjQuery版も用意されておりie8でも挙動することを確認できました。

日本では、まだまだIE8対応が多いかと思いますので、今回はjQuery版waypoints.jsの導入方法について説明いたします。
参考:waypointsのサイト

スクロールをキーとしたアクションをつけるwaypoints.jsをつかう。

1年半以上前に、スクロールすると特定の位置で大きなナビゲーションが小さくなってウニョっと出てきたりさせたい。と調べている最中にみつけ、かなりの使用頻度で利用し続けている軽量で扱いやすいプラグインについてご紹介します。

特定の要素へスクロールするたびに、処理を実行するjQueryのプラグイン – Waypoints.js

スクロールでなにかしらの処理を実行できるプラグインは多いですが、今回はナビゲーションをウニョって出てきたら、またある程度の位置で「ウニョってしまう」…つまり、上方からのスクロールと下方からのスクロールで別々の処理ができるのものが必要です。
「Waypoints.js」は今回実装したい動きにはぴったりそうなので、早速ダウンロードして試してみます。

注)ダウンロードしたフォルダーの中に入っている、jquery.waypoints.jsの使い方を説明しています。

冒頭でも触れましたが、waypoints.jsは3.x系よりjQueryが要らないそして+IE9サポートとなり、日本人号泣かとおもわれましたが、同包されているjquery.waypoints.jsはひきつづき+ie8サポートしていますので、こちらについて説明をしていきます。

jQueryとjquery.waypointsの設置方法は割愛。

jQueryのプラグインって基本的にどんな風に使うの?などは「jQuery 設置方法」などでGoogleで検索していただければ詳しいサイトをご覧いただけますので、割愛させていただきます。皆さまとても丁寧に説明されています。

とういうことで、早速、使ってみます。

1.要素にclassをとったりつけたりしてCSSを切り替えます。

CSSを利用して表示を切り替える記述はいたってシンプルです。
予め、通常のcssと切り替えた後のcssを準備して、コンテンツエリアに入ったら変化させたい要素にclassを付け加えることで切り替えて表示します。

ということでさっそく…

通常のcssとして大きなナビゲーション用意、その他に小さくした上でウィンドウ上部へ固定するcssを制作。そして、コンテンツエリアに入ったらwaypoints.jsをりようしてclassを追加することでcssを切り替え、コンテンツエリアから出たら追加したclassを削除することで大きなナビゲーションになってページ上部へ戻る動き。…をテストしました。

言葉だと長いので、こちらのサンプル1 – Amiten.incで動作をご確認ください。

waypointsの記述

htmlとCSSの記述はサンプル1 – Amiten.incのソースをご確認ください。

この記述で、#kirikaeという要素に、ウィンドウの上部が触れた瞬間handler内に記載した「#headerに.scrollクラスをつけたりけしたりするよ」を実行します。

  • 基本は、ウィンドウの上部が要素に触れたタイミングで実行します。
  • handlerとは直訳すると「扱う人」ということ。変更する対象と変更する動きを記述してください。

handler内の記述がわからない人は「toggleClass 簡単 使い方」で検索してみてください。これでとりあえず最低限の動きができましたね。

2.さらに消えた後にウニョって動きをつける。

次は、1.にプラスしてコンテンツエリアに入ったらウニョって出てきて、コンテンツエリアの外に出たらウニョって消えて、さらに消えた後にページ上部からウニョって出てくる動きを付けます。(またもや説明長いですが、こちらのサンプル2 – Amiten.incをご覧いただければ実際の動きが確認できます。)

if文で、down…つまりスクロールが下方の場合と上方の場合で動作を切り分けます。スクロールの発火を捕まえる記述がとても簡単です。
実はこの記述、本家サイトではちゃんと説明がされなくなっていました。なんか、分かるだろ?的に(汗)

また、オプションのoffset値を使えば、特定の要素からさらに100pxスクロールしたら処理を実行させるなども可能ですので、パララックスサイトまでいかなくても、スクロール中にちょっとした動き付けたいなぁ・・・なんて時に使いやすいのでないでしょうか。

page
1 / 1