[JavaScript]animate.cssとjQeuryを使ってスクロールに応じて要素を動かす関数を作ってみました。

カテゴリー:
jQuery

縦長にデザインされたサイトで、スクロールするとフェードインしたり震えたりジャンプしたりいろいろ動いてクリックを誘導するデザインはポピュラーですよね。

よく使うものなので、簡単に使いまわせるように関数を作ってみました。

サンプル

demo

codepen

使用するライブラリ

jQuery
animate.css

animate.cssは、要素に様々なエフェクトを与えるCSSのみで書かれたライブラリ。headで読み込んで、動かしたい要素にclassを割り当てるだけで動いてくれるびで、とても便利です。

今回のサンプルでは、bounce(跳ねる)、pulse(膨らんでしぼむ)、swing(揺れる)、fadeIn(フェードイン)の4つを使ってみましたが、animate.cssの配布元サイトには数十にも及ぶエフェクトのサンプルが用意されています。

html

CSS

JavaScript

スクロール量に応じて引数に指定したanimate.cssのclassを付与したり外したりする関数animate()を、scroll(touchstart)イベントの中で呼び出しています。

scrollイベントはブラウザに負荷がかかるってことで、setTimeout()を使って負荷を減らす処理を入れてみました。

参考にさせていただきました。

jQueryとCSSのtransitionで可視範囲に入ってからアニメーションさせる方法|Webpark
[jQuery] ウインドウのリサイズ操作が終わった時にだけ処理を実行する | CreativeStyle

コメントを残す

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