WaypointsとAnimate.cssでスクロールアニメーションを実装する方法
こんにちは、koheiです。
最近スクロールしていくと動的に要素が表示されるWebサイトが増えていますよね。
WordPressを使用したWebサイトでもjQueryプラグイン「Waypoint」とアニメーション用CSS「Animate.css」を使えば簡単にスクロールアニメーションが実装できます。
それでは早速実装方法をご紹介しましょう。
Waypointの読み込み
Waypointsとは、スクロールイベントが制御できるjQueryのプラグインです。
以下サイトからwaypointsをダウンロードしましょう。
Waypoints
WordPressにWaypointsを読み込むには、ダウンロードしたファイル「jquery.waypoints.min.js」をjsファルダに格納し、functions.phpに以下を記載します。
※4行目は、自分で作成したスクリプトファイルを読み込む処理です。
※6行目がWaypointsのスクリプトファイルを読み込む処理です。
|
1 2 3 4 5 6 7 8 |
// スクリプト(jQuery)読み込み function add_script(){ //my scriptの読み込み wp_enqueue_script('my_script', get_template_directory_uri() . '/js/my_script.js', array('jquery'), '', true); //waypointsの読み込み wp_enqueue_script('waypoints', get_template_directory_uri() . '/js/jquery.waypoints.min.js', array('jquery'), '', false); } add_action( 'wp_enqueue_scripts', 'add_script' ); |
Animate.cssの読み込み
animate.cssとは、手軽にCSS3のアニメーションを実装できるスタイルシートです。
以下サイトからダウンロードしましょう。
Animate.css
Animate.cssを読み込みには、header.phpのheadタグ内に以下を記載します。
|
1 |
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/animate.css" type='text/css'> |
スクロールアニメーションの実装
下準備ができましたので、早速スクロールアニメーションを実装します。
以下サイトでスクロールアニメーションを実装していますのでそれを例に解説します。
スクロールアニメーションの例
まずはアニメーションさせたい要素をCSSで非表示にします。
|
1 2 3 |
#profile_strength img { visibility: hidden; } |
次に、自分のスクリプトファイル（my_script.js)にWaypointsのスクロール制御を実装します。
以下はアニメーションさせたい要素（#profile_strength img）がブラウザ上部から「70%」の位置にきたときに、処理が実行される処理です。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
jQuery('#profile_strength img').waypoint(function(){ if(jQuery('#profile_strength img').css('visibility') == 'visible') { //すでに表示中のときは何もしない } else { jQuery('#profile_strength img').css("visibility","visible"); jQuery('#profile_strength img').toggleClass('animated fadeInUp'); } } ,{offset: '70%'} ); |
非表示にしていた要素を表示させ、toggleClassで”animated fadeInUp”というクラス名を付与することで、アニメーションを実行することができます。（６〜７行目）
※Animate.cssは、クラス名を付与するだけでアニメーションさせることが可能です。fadeInUpを違うクラス名に変えることで様々なアニメーションを付けることができます。付与するクラス名は以下サイトを参考ください。
Animate.css
※２行目のif文は、すでにアニメーション要素が表示されていた場合は、何もしないようにする処理です。
最後に
以上、WaypointsとAnimate.cssでスクロールアニメーションを実装する方法をご紹介しました。
ちょっとしたアニメーションを入れることで、見る人の興味を引き魅力的なコンテンツに仕上がると思います。
みなさんも是非お試しください！
それでは！
スポンサーリンク
