ScrollReveal＋CSSアニメーションでWebページをちょっとだけオシャレにしてみる #JavaScript

この記事は「納期1日だけどオシャレなアニメーションもつけてイイ感じにして」と言われた人間が、頑張って工夫したことをまとめたものです。

タイトルにあるScrollRevealとは

ScrollRevealはスクロールアニメーション系のJavascriptライブラリです。
jQuery不要、CSS不要で手軽にスクロールアニメーションを実装できます。

事前準備

まずHTMLでscrollreveal.jsを読み込みます。

HTML

<script src="/js/scrollreveal.min.js"></script>

そして、アニメーションさせたい要素に任意のclassを設定します。

HTML

<div class="anime">アニメーションさせたい要素</div>

ここではclass="anime"を使うことにしました。

やりたいこと

ページをスクロールすると要素がフワっと出てくる
要素がフワッと出てきた後で、要素内のアイコンが動く

やりたいこと① ページをスクロールすると要素がフワっと出てくる

「事前準備」で用意したアニメーションさせたい要素に対してアニメーションを実装します。

Javascript

ScrollReveal().reveal('.anime');

1行書いただけ。お手軽です。

もう少し動きを変えたい場合はオプションも設定できます。

Javascript

ScrollReveal().reveal('.anime',{
    duration: 1000, //アニメーションの長さ
    delay: 500      //アニメーションの遅延
});

試しに動かすとこんな感じ↓

See the Pen
ScrollReveal-sample01 by tricolorebox (@tricolorebox)
on CodePen.

やりたいこと② 要素がフワッと出てきた後で、要素内のアイコンが動く

さて、こまった！

スクロールで要素が出てきた後で、アクセントとしてアイコン画像を動かしたいのですが（※イメージとしてはauトップページ）細かいアニメーションには対応していません

アイコンのアニメーションをよく観察すると...？

アイコンは背景画像として読み込まれているようです。
CSSアニメーションでアイコンのスプライト画像をパラパラ漫画のように１コマずつ動かしていました。これを組み合わせられないかな

アニメーション終了に任意のclassを付与する

ここで先ほどのScrollRevealの話に戻ります。
ScrollRevealではafterRevealというオプションでコールバックを設定できます。
これにより、アニメーション後に任意の関数を実行することが可能です。
これを利用してアニメーションが終わったら、is-visibleというclassを付与します。

Javascript

ScrollReveal().reveal('.anime',{
    afterReveal: function (el){
        el.classList.add('is-visible');
    }
});

このような書き方になります。

CSSでアイコン用のアニメーションを設定する

最後にアイコン用のアニメーションを設定します。
繋がったアイコン画像を読み込んでアニメーションを設定します。
今回は１コマ96x96として、用意したのはこんな感じのイラスト↓

そしてCSSでis-visibleのclassがついた要素の子要素にアイコンのアニメーションを設定します。

HTML

<div class="anime">
    <div class="icon"></div>
    <div class="inner">アニメーションさせたい要素</div>
</div>

CSS

.icon{
    background:url(/img/sample_anim.png) no-repeat 0 0;
    width:96px;
    height:96px;
    margin:0 auto;
}
.is-visible .icon{
    animation: parapara 1s steps(8) 3;
    /*１秒間８コマのアニメーションを３回繰り返す*/
}
@keyframes parapara {
  to {
    background-position: -768px 0;
    /*アイコン幅96x８コマ=768px*/
  }
}

どうでしょうか、ちょっと可愛くなったかな...

See the Pen ScrollReveal-sample02 by tricolorebox (@tricolorebox) on CodePen.

最後に

アニメーション部分だけのまとめになりましたが、実際お仕事ではスマホ用・PC用で別々にスクロールアニメーションを設定しました。
アニメーションのタイミング等があとで調整しやすいライブラリを選べると自分も楽できますよ