WordPressでスクロールにあわせて要素をかんたんアニメーション化

最近よく見かけるスクロールにあわせて、動くウェブサイト。今日は、スクロールにあわせて要素をアニメーションで表示する「animate.css」と「wow.js」をWordPressで導入する方法についてご紹介いします。手順については「wow.js」のサイトに記載されている手順を参考にしています。

「wow.js」の追加

こちらは「自作のJavaScriptをWordPressで利用してスマホからのアクセスのみリダイレクトする」で
紹介した内容と同じ手順で、「wow.min.js」を「functions.php」に追加します。
「wow.min.js」はこちらからダウンロード出来ます。
今回、ダウンロードしたjsファイルはテーマフォルダの中に「js」というフォルダを作成してアップしました。

function my_scripts() {
    //wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );
    wp_enqueue_script( 'wow', get_stylesheet_directory_uri() . '/js/wow.min.js', array(), '1.1.2', false );  
}
add_action( 'wp_enqueue_scripts', 'my_scripts' );
「animate.css」の追加

CSSも同じように「functions.php」に追加します。
「animate.js」はこちらからダウンロード出来ます。
今回、ダウンロードしたcssファイルはテーマフォルダの中に「css」というフォルダを作成してアップしました。

function my_styles() {
    //wp_enqueue_style( $handle, $src, $deps, $ver, $media );
    wp_enqueue_style( 'animate', get_stylesheet_directory_uri() . '/css/animate.css', array(), null, 'all');
}
add_action( 'wp_enqueue_scripts', 'my_styles');

JavaScriptは「wp_enqueue_script」関数を使いましたが、
CSSの場合は「wp_enqueue_style」関数というのを使います。
    $handle : 登録する名前
    $src : CSSファイルの場所
    $deps : このCSSファイルの前に読み込む必要があるものを記述。
    $ver : バージョン
    $media : CSSのメディアタイプを指定。

JavaScriptの追加
new WOW().init();

こちらを追記します。外部jsファイルでもヘッド内に記述でもどちらでもOKです。

アニメーションを設定したい要素にclass名を追加

「animate.css」のサイトを参考に
「wow」と追加したいアニメーション名をclass名に記述します。

<div class="wow slideInUp">…</div>

尚、以下のオプションが利用可能です。

data-wow-duration アニメーション時間
data-wow-delay 読み込みからアニメーションをスタートするタイミング
data-wow-offset 画面に表示されてからどれぐらいの距離をスクロールしたらスタートするか
data-wow-iteration アニメーションの繰り返し回数

例えばこういう感じになります。

<!-- 1秒後に1秒かけて下方向からフェードイン -->
<div class="wow fadeInUp" data-wow-duration="1s" data-wow-delay="1s">…</div>

かんたんに思った通り動作してくれるので結構楽しいです(^ ^)
見た目にも遊び心があって面白いものが作れると思います。

応援よろしくお願いします。
いいね ! してもらえると嬉しいです。

Twitter で

自己紹介

インディーズでミュージシャンをやっていたのですがいつのまにか...

とある企業でショップのアルバイトスタッフから正社員、支店長を経てシステム部門に異動するという、開発担当としては変わった経緯を持っている方だと思います。

昨年の3月に結婚し、尻敷かれ男子の仲間入りを果たしました(笑)

現在勤めているJTクラウドシステムでは、「 Excel VBA 」を活用した効率化ツールの開発、「 WordPress 」を活用したWEBサイト、業務用WEBアプリケーション開発を中心に「 ネットワーク・サーバー構築 」や「 Office365製品の導入支援 」、最近は、ホームページ制作に加え、記事の執筆代行や掲載に必要な情報のリサーチ、テロップ入れや映像の切りはりなどの簡単な動画編集なども、まとめて行なっています。

お問い合わせはJTクラウドシステムホームページからお願いします。
スポンサーリンク