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

もんしょー（@sima199407）です。

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

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

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

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

Table of Contents

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

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

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

導入手順

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

①スクリプトを記述する

方法その１

header.php内の~に以下を追加します。
[code]<script src="https://unpkg.com/scrollreveal"></script>[/code]

例)
[code]~

<!— 以下にscrollrevealを記述 -->

</head>

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

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

方法その２

functions.phpに記入する
[code]function main_scroll_scripts() {
wp_enqueue_script( 'main-scr-rev', 'js/scrollreveal.min.js' );
}
add_action( 'wp_enqueue_scripts', 'main_scroll_scripts' );[/code]

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

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

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

[code]<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>[/code]

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

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

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

方法その１

footer.phpの直下に記入する
[code]~</body><script>

window.sr = ScrollReveal();

sr.reveal(‘.[先程つくったクラス名(rvl-leftなど)]');

</script>

</html>

[/code]
一番シンプルなやり方です。

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

例)
[code]<script>

window.sr = ScrollReveal();

sr.reveal('.rvl-left');

[/code]

[code]ScrollReveal({ reset: true });[/code]にするとスクロール時にイベントが繰り返されます。

方法その２

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

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

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

基本の形
[code]window.sr = ScrollReveal();

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

[/code]

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

</body>

<?php if ( is_single() ): ?>

<?php endif; ?>

</html>

[/code]
という感じに書いてみます。

get_theme_file_uri を使ってみる手法

「〜/js/scroll-reveal.js〜」を別の書き方をすると
[code]<script src="<?= get_theme_file_uri('/js/scroll-reveal.js'); ?>"></script>
[/code]

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

④記述方法

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

scroll-reveal.js

[code]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 } });

[/code]
してみます。

確認用のDEMO

オプション

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

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

参考：公式ドキュメント

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

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

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

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

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

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

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

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

[box04 title="参考にさせてもらったサイト"]
スクロール時にちょっとしたアニメーションを加えたいときに使えるJSライブラリ「ScrollReveal」

テーマにJavaScript（jsファイル）を正しい方法で読み込む

文字や画像が動く！WPプラグインの使い方と設定でおもいっきり遊ぼう

[/box04]