jQueryとcssでスクロール位置にあわせてアニメーション実行

昨今の1ページものとかで、スクロールさせてコンテンツが表示されたら何らかのアニメーションを伴って表示されるような表現を良く見るようになりましたが、jQueryのプラグインとanimate.cssでカンタンに実装できるみたいなので、試してみたメモです。

まずは位置指定で処理を行うプラグイン

プラグインは以下のものを用いました。

jQuery Waypoints

使用法をカンタンに。

ダウンロードしてヘッダなどで読み込み。

動かしたい要素のセレクタを指定して、処理を記述

これで、そのセレクタのボックスが指定の位置に来たら記述した処理が実行されます。

指定位置はデフォルトだと画面上端で、offsetなどのパラメータに値(pxや%)を指定することで、上端を基点とした相対位置を指定できます。

上記の例ですと、指定した要素が画面の80%の位置に来たときに処理が実行されます。

スクロールの方向を取得してトリガーとして使ったりとかその他諸々も。

詳細はドキュメントを参照ください。とりあえずは割愛。

そしてアニメーションさせるcss

アニメーションの実装は以下のスタイルシートを用いました。

Animate.css

使い方をカンタンに。

ヘッダで読み込みます。
(GitHubに圧縮版もあります)

アニメーションさせたい要素に、クラスを指定します。animatedとアニメーションの種類を示す二つのclassが必要です。

animatedはプロパティとしてanimation-durationとanimation-fill-modeを指定しています。速度を変えたりなどの場合は自分でカスタムしたクラスを用意して、それを指定するなどで代替できます。

位置指定とアニメーションについてはざっくりと以上です。

さて、位置+アニメーションをするには、をカンタンに。

waypointで位置を指定して、指定した要素にanimate.cssで必要なクラス名を加えるように記述します。

例として、スクロールして画面に現れたらフェードインさせたい場合。
jquery.waypoint.jsとanimate.cssを読み込みます。その辺は上記参照。

フェードインさせたい要素に任意のclassを付与しておき、js側でそれを指定して動的にanimateのclassを追加します。

与えたいアニメーションごとに個別のセレクタを用意しておけば、それぞれの要素に対してセレクタを指定するだけで、画面に現れたらアニメーションするコンテンツ、の実装完了です。


ほんとに簡単で、いい世の中になったなあと思いつつ、コーダーってどんどんいらなくなっているな、という気持ちで複雑です。ふふ…