ソフトエンジニアのブログ、制作ノウハウ等を配信

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のスクリプトファイルを読み込む処理です。

Animate.cssの読み込み

animate.cssとは、手軽にCSS3のアニメーションを実装できるスタイルシートです。
以下サイトからダウンロードしましょう。
Animate.css

Animate.cssを読み込みには、header.phpのheadタグ内に以下を記載します。

スクロールアニメーションの実装

下準備ができましたので、早速スクロールアニメーションを実装します。
以下サイトでスクロールアニメーションを実装していますのでそれを例に解説します。
スクロールアニメーションの例

まずはアニメーションさせたい要素をCSSで非表示にします。

次に、自分のスクリプトファイル(my_script.js)にWaypointsのスクロール制御を実装します。
以下はアニメーションさせたい要素(#profile_strength img)がブラウザ上部から「70%」の位置にきたときに、処理が実行される処理です。

非表示にしていた要素を表示させ、toggleClassで”animated fadeInUp”というクラス名を付与することで、アニメーションを実行することができます。(6〜7行目)
※Animate.cssは、クラス名を付与するだけでアニメーションさせることが可能です。fadeInUpを違うクラス名に変えることで様々なアニメーションを付けることができます。付与するクラス名は以下サイトを参考ください。
Animate.css

※2行目のif文は、すでにアニメーション要素が表示されていた場合は、何もしないようにする処理です。

最後に

以上、WaypointsとAnimate.cssでスクロールアニメーションを実装する方法をご紹介しました。
ちょっとしたアニメーションを入れることで、見る人の興味を引き魅力的なコンテンツに仕上がると思います。
みなさんも是非お試しください!

それでは!

スポンサーリンク

いいね!を押すと、
最新記事をお届けします。

Twitter で
関連記事(一部広告含む)

コメントを残す

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

CAPTCHA


ページトップボタン