web開発

WordPressで画像をふわっと表示する「ScrollReveal」を導入する方法【web制作にも】

もんしょー(@sima199407)です。

WordPressの表示で「ふわっと出てくる表示したい」と考えたことありませんか?

今回はこれの導入方法をやってみようと思います。

使うのはjavascriptのライブラリ「ScrollReveal」を使います。

プラグイン以外でWordPressのカスマイズをしたことがなくても簡単にできますのでご参考くださいませ。

導入理由→比較的簡単にできる

理由はシンプルで導入コストがかなり低いんですよね。

単体でスクリプトを読み込めばできるし、カスタマイズができるから思うように動かすことも可能です!

導入手順

ソースコードを編集するので、念の為バックアップをとっておくことをおすすめします。

①スクリプトを記述する

方法その1

header.php内の~に以下を追加します。

<script src="https://unpkg.com/scrollreveal"></script>

例)

~
<!— 以下にscrollrevealを記述 -->
<script src="js/scrollreveal.min.js"></script>
</head>

追加できたら「ファイルを更新」を押します。

参考:header.phpを編集しないで読み込む場合はこちらが参考になります

方法その2

functions.phpに記入する

function main_scroll_scripts() {
wp_enqueue_script( 'main-scr-rev', 'js/scrollreveal.min.js' );
}
add_action( 'wp_enqueue_scripts', 'main_scroll_scripts' );

「wp_enqueue_script()」という関数を使うと読み込みが可能です。

②動作のターゲットを作成します

ターゲットはクラス名によって判別されますので、今回はいくつかテストできるクラスを作っておきます。

<div class="rvl-left">左からアニメーション要素</div>

<div class="rvl-right">右からアニメーション要素</div>

<div class="rvl-top">上からアニメーション要素</div>

<div class="rvl-bottom">下からアニメーション要素</div>

<div class="rvl-spin">回転するアニメーション要素</div>

③スクリプトを実行させます

次に実行用のスクリプトに記入します

方法は2つご用意しました。

方法その1

footer.phpの直下に記入する

~</body><script>
 window.sr = ScrollReveal();
  sr.reveal(‘.[先程つくったクラス名(rvl-leftなど)]');
</script>
</html>

一番シンプルなやり方です。

簡単にできる反面、スクリプトがおおくなるとfooter.phpが長くなります。

例)

<script>
  window.sr = ScrollReveal();
  sr.reveal('.rvl-left');
~
ScrollReveal({ reset: true });

にするとスクロール時にイベントが繰り返されます。

方法その2

別途でjsファイルを作成する

~wp-content/[テーマ名]/js内に新規で編集用のファイルを作り読み込む方法です。

1 jsフォルダ内に新規ファイルを作成します。

基本の形

window.sr = ScrollReveal();
  sr.reveal(‘.[クラス名]');

2 読み込みをするためのイベントをfooter.phpに追加します。

~
</body>
<?php if ( is_single() ): ?> <!-- 読み込み個別ページをスラッグ名を指定も可能です -->
<script src="<?php echo get_template_directory_uri(); ?>/js/scroll-reveal.js"></script>
<?php endif; ?>
</html>

という感じに書いてみます。

get_theme_file_uri を使ってみる手法

「〜/js/scroll-reveal.js〜」を別の書き方をすると

<script src="<?= get_theme_file_uri('/js/scroll-reveal.js'); ?>"></script>

こっちのほうがスマートですかね?笑

④記述方法

参考程度に記述方法を書いていきます

scroll-reveal.js

window.sr = ScrollReveal({ reset: true });
    sr.reveal('.durationDouble', { duration: "1000" });
    sr.reveal('.rvl-left', { origin: 'left', duration: 2000, distance: '3000px', opacity: 1, scale: 1 });
    sr.reveal('.rvl-right', { origin: 'right',delay: 1000, viewFactor: 1.0, distance: '2000px' });
    sr.reveal('.rvl-top', { origin: 'top', distance: '450px' });
    sr.reveal('.rvl-bottom', { origin: 'bottom',distance: '600px' });
    sr.reveal('.rvl-spin-x', { duration: 5000,rotate: {x: 180, y: 0, z: 0 }, viewFactor: 0.5} );
    sr.reveal('.rvl-spin-y', { duration: 5000,rotate: {x: 0, y:180, z: 0 }, viewFactor: 0.5} );
    sr.reveal('.rvl-spin-z', { duration: 5000,rotate: {x: 0, y: 0, z:180 }, viewFactor: 0.5} );
    sr.reveal('.rvl-spin-xyz', { duration: 3000,rotate: { x: 180, y: 180, z: 180 } });

してみます。

確認用のDEMO

オプション

オプションを使って細かい所のカスタマイズができますね

例)

sr.reveal('.animate', { easing: 'ease', duration: 2000, distance: '600px', opacity: 1, scale: 1 });

参考:公式ドキュメント

日本語でしたらこちらがわかりやすいです。

もしプラグインでやるなら?

Shortcodes Ultimate」というのがあるみたいです。

こちらが参考になります。
アニメーションの種類が多すぎですね。笑

ブログ書くくらいなら特にいらないかなと思います。

簡単に導入し適度にカスタマイズができるのでおすすめ!

今回は「ScrollReveal」を導入してみました。

WordPressじゃなくても十分役に立つと思います!