最終更新日：2021.02.04
簡単に今流行のスクロールアニメーションを取り入れてみませんか？
目立たせたいところがアニメーション表示できると、ブログでも効果的につかえそうですよね。
こんな感じで使えちゃうよ！
スクロールアニメーションをしてみたいけど難しそう…
スクロールアニメーションってめんどい…
ガッツリライブラリ導入しないと出来ないんじゃ？
スクロールアニメーションってめんどい…
ガッツリライブラリ導入しないと出来ないんじゃ？
今回使うライブラリはこちら
「ScrollReveal」https://scrollrevealjs.org/
cdnが用意されているのでリンクを１行追加するだけで実装可能です。
また単体で動くのでjQueryなどのライブラリに依存しないし別途CSSも必要ありません。
アニメーションオプションも豊富で基本の動作はこのライブラリだけで完了していまいます。
なんだただの神ライブラリか(^q^)
そんな神ライブラリを使って基本の紹介からアニメーション別のサンプルまでコピペで実装できるようにしました。
目次
実装方法
実装は３ステップで完了します。
まずはhead〜/head内か好きな場所に以下のタグを追加してください。
コピー
<script src="https://unpkg.com/scrollreveal"></script>
次にHTMLの動かしたい要素を確認！今回は.boxというclassを対象にします。
コピー
<div class="box">こいつが動くヨン！</div>
最後にアニメーションしたいクラス名を指定します。今回は.boxというclassを指定しましょう。
コピー
<script>
$(function () {
ScrollReveal().reveal('.box', {});
});
</script>
WordPressで使う前提でjQueryありの書き方をしていますが、
使ってない方は
使ってない方は
$(function () {});を削除してください！
以上です！
実行結果はこちら
実行結果はこちら
こいつが動くヨン！
こいつが動くヨン！
こいつが動くヨン！
簡単ですね。
それではアニメーションパターン別にコピペしていきましょう。
アニメーション実例
オプションを色々指定すると細かな動きを制御できます。
横から上からフェード…自由自在です。
各オプションを設定したコピペ用サンプルを紹介します。
左からスライドイン
左からふわっとスライドインしてくるアニメーションです。
html
コピー
<script src="https://unpkg.com/scrollreveal"></script>
<script>
$(function () {
ScrollReveal().reveal('.left', {
delay: 300, // アニメーション開始までの時間
duration: 1600, // アニメーション完了にかかる時間
origin: 'left', // 要素がどの方向から来るか
distance: '50px', // 移動する距離
reset: true // フレームインの度に動かすか
});
});
</script>
<div class="left">こいつが動くヨン！</div>
実行結果はこちら
こいつが動くヨン！
こいつが動くヨン！
こいつが動くヨン！
右からスライドイン
右からふわっとスライドインしてくるアニメーションです。
html
コピー
<script src="https://unpkg.com/scrollreveal"></script>
<script>
$(function () {
ScrollReveal().reveal('.right', {
delay: 300, // アニメーション開始までの時間
duration: 1600, // アニメーション完了にかかる時間
origin: 'right', // 要素がどの方向から来るか
distance: '50px', // 移動する距離
reset: true // フレームインの度に動かすか
});
});
</script>
<div class="right">こいつが動くヨン！</div>
実行結果はこちら
こいつが動くヨン！
こいつが動くヨン！
こいつが動くヨン！
上からスライドイン
上からふわっとスライドインしてくるアニメーションです。
html
コピー
<script src="https://unpkg.com/scrollreveal"></script>
<script>
$(function () {
ScrollReveal().reveal('.top', {
delay: 300, // アニメーション開始までの時間
duration: 1600, // アニメーション完了にかかる時間
origin: 'top', // 要素がどの方向から来るか
distance: '50px', // 移動する距離
reset: true // フレームインの度に動かすか
});
});
</script>
<div class="top">こいつが動くヨン！</div>
実行結果はこちら
こいつが動くヨン！
こいつが動くヨン！
こいつが動くヨン！
下からスライドイン
下からふわっとスライドインしてくるアニメーションです。
html
コピー
<script src="https://unpkg.com/scrollreveal"></script>
<script>
$(function () {
ScrollReveal().reveal('.top', {
delay: 300, // アニメーション開始までの時間
duration: 1600, // アニメーション完了にかかる時間
origin: 'bottom', // 要素がどの方向から来るか
distance: '50px', // 移動する距離
reset: true // フレームインの度に動かすか
});
});
</script>
<div class="bottom">こいつが動くヨン！</div>
実行結果はこちら
こいつが動くヨン！
こいつが動くヨン！
こいつが動くヨン！
大きくなるフェードイン
大きくなりながらフェードインしてくるアニメーションです。
html
コピー
<script src="https://unpkg.com/scrollreveal"></script>
<script>
$(function () {
ScrollReveal().reveal('.big', {
delay: 300, // アニメーション開始までの時間
duration: 1600, // アニメーション完了にかかる時間
scale: 0.1, // 表示前のサイズ 0.1 なら 0.1倍
reset: true // フレームインの度に動かすか
});
});
</script>
<div class="big">こいつが動くヨン！</div>
実行結果はこちら
こいつが動くヨン！
こいつが動くヨン！
こいつが動くヨン！
小さくなるフェードイン
小さくながらフェードインしてくるアニメーションです。
html
コピー
<script src="https://unpkg.com/scrollreveal"></script>
<script>
$(function () {
ScrollReveal().reveal('.small', {
delay: 300, // アニメーション開始までの時間
duration: 1600, // アニメーション完了にかかる時間
scale: 2, // 表示前のサイズ 2 なら 2倍
reset: true // フレームインの度に動かすか
});
});
</script>
<div class="small">こいつが動くヨン！</div>
実行結果はこちら
こいつが動くヨン！
こいつが動くヨン！
こいつが動くヨン！
縦回転しながらフェードイン
縦回転しながらフェードインしてくるアニメーションです。
html
コピー
<script src="https://unpkg.com/scrollreveal"></script>
<script>
$(function () {
ScrollReveal().reveal('.round1', {
delay: 300, // アニメーション開始までの時間
duration: 1600, // アニメーション完了にかかる時間
rotate: { x: 180, y: 0, z: 0 }, // 回転の設定
reset: true // フレームインの度に動かすか
});
});
</script>
<div class="round1">こいつが動くヨン！</div>
実行結果はこちら
こいつが動くヨン！
こいつが動くヨン！
こいつが動くヨン！
横回転しながらフェードイン
横回転しながらフェードインしてくるアニメーションです。
html
コピー
<script src="https://unpkg.com/scrollreveal"></script>
<script>
$(function () {
ScrollReveal().reveal('.round2', {
delay: 300, // アニメーション開始までの時間
duration: 1600, // アニメーション完了にかかる時間
rotate: { x: 0, y: 180, z: 0 }, // 回転の設定
reset: true // フレームインの度に動かすか
});
});
</script>
<div class="round2">こいつが動くヨン！</div>
実行結果はこちら
こいつが動くヨン！
こいつが動くヨン！
こいつが動くヨン！
めちゃめちゃたくさんのアニメーションパターンがありますね。
それぞれを組み合わせることもできるので幅広いアニメーションを実現できると思います。
オプションまとめ
アニメーション用のオプションまとめです。
| オプション名 | 説明 | 設定する値 | デフォルト値 |
|---|---|---|---|
| delay | アニメーションの遅延を、ミリ秒（1秒＝1000ミリ秒）単位で設定 | 数値 | 0 |
| distance | 要素を表示する前にどれくらいずらしておくかを設定します。 | px / em / % /rem / vw | 20px |
| duration | アニメーションの長さを、ミリ秒（1秒＝1000ミリ秒）単位で設定。 | 数値 | 600 |
| opacity | アニメーションが始まるときの透明度 | 数値（0〜1まで） | 0 |
| origin | アニメーション開始時に、要素がどの方向から動いてくるか | top、right、bottom、left | bottom |
| rotate | 要素を回転させながら表示したい場合に設定 | 数値（X軸、Y軸、Z軸の3次元設定を行う） | x: 0,y: 0,z: 0 |
| scale | 要素を拡大縮小しながら表示したい場合 アニメーション開始時の要素の大きさを設定する。 |
数値 | 0.9 |
| desktop | デスクトップブラウザでアクセスした際に、アニメーションを有効にするか、無効にするかを設定する。 | true（有効）、false（無効） | true |
| mobile | モバイル端末ブラウザでアクセスした際に、アニメーションを有効にするか、無効にするかを設定する。 | true（有効）、false（無効） | true |
| useDelay | アニメーションをいつ発生させるかを設定する。 遅延を実行する条件。 |
always（いつでもアニメーション適用）、once（最初の1回だけアニメーション適用）、onload（ページを読み込んだ時にアニメーション適用） | always |
| reset | falseの場合、アニメーションが1度だけ実行される。trueの場合は表示されるたびにアニメーションが実行される | true（有効）、false（無効） | true |
| easing | アニメーションの細かい動きを設定 | ease（初期値） linear（一定） ease-in（ゆっくり始まる） ease-out（ゆっくり終わる） ease-in-out（ゆっくり始まってゆっくり終わる） cubic-bezier()（カスタム） |
cubic-bezier(0.6, 0.2, 0.1, 1) |
| viewFactor | アニメーションを開始するために表示が必要な要素の割合。0.2 = 20% | 0.1〜1 | 0.2 |
| viewOffset | 要素のオフセット。固定のナビゲーションバーがある場合などに使う | top: 0, right: 0, bottom: 0, left: 0; | top: 0, right: 0, bottom: 0, left: 0; |
コピペ、その先へ…
基本動作を簡単にコピペでできるようにまとめてみました！
オプションを組み合わせたり、自分で追加したCSSアニメーションと合わせるともっと幅が広がります。
色々とためしてみてくださいね♪
