デザイン制作、Web制作、ブログ運営などのノウハウを配信するサイト

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 で

ブログ用WordPress無料テーマ
「chameleon(カメレオン)」

WordPressテーマ(chameleon)は、「WordPressで手軽・気軽にブログ始められる」をコンセプトに制作しました。
初めてWordPressでブログを始める方、是非シンプルなテーマchameleon「カメレオン」を使ってみてください!

ブログ用無料WordPressテーマ

士業用WordPress無料テーマ
「InomaExpertBasic」

士業用の無料WordPressテーマを作成しました。
もちろん、一般的なビジネスサイトに活用できます。
自分でサイト更新したい方、
これからホームページを立ち上げようとする方、
自分でWordPressテーマを作ってみたい方、
この無料テーマを是非活用してみてください。

無料WordPressテーマ

コメントを残す

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

CAPTCHA


ページトップボタン