最近よく見かけるスクロールにあわせて、動くウェブサイト。今日は、スクロールにあわせて要素をアニメーションで表示する「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>

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

自己紹介

松田大と申しますm(_ _)m
インディーズでミュージシャンをやっていたのですがいつのまにか…

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

「Excel VBA」からスタートして、Yamaha RTX シリーズで VPN環境構築、Hyper-V環境構築、Windowsアプリ開発などを経験した後、「 WordPress 」に出会い、どっぷりハマっています。

現在勤めているETBS合同会社では、「 WordPress 」を活用したWEBサイト、業務用WEBアプリケーション開発を中心に、記事の執筆代行や掲載に必要な情報のリサーチ、映像のテロップ入れや切りはりなどの簡単な動画編集なども、まとめて行なっています。

現在、代表兼二児のパパ。子育てを通じて、こどもたちにもプログラミングの楽しさに触れてほしいと思うようになり、「こどもICTかつしか教室」を開講中。最近は童心に帰り、簡単なゲーム制作なんかも楽しんでいます(^_^)。

お問い合わせ