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


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

## タイトルにあるScrollRevealとは
[ScrollReveal](https://scrollrevealjs.org/)はスクロールアニメーション系のJavascriptライブラリです。
jQuery不要、CSS不要で手軽にスクロールアニメーションを実装できます。

## 事前準備
まずHTMLで**scrollreveal.js**を読み込みます。

```html:HTML
<script src="/js/scrollreveal.min.js"></script>
```

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

```html:HTML
<div class="anime">アニメーションさせたい要素</div>
```
ここでは`class="anime"`を使うことにしました。

## やりたいこと

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

## やりたいこと① ページをスクロールすると要素がフワっと出てくる
「事前準備」で用意したアニメーションさせたい要素に対してアニメーションを実装します。

```javascript:Javascript
ScrollReveal().reveal('.anime');
```
1行書いただけ。お手軽です。

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

```javascript:Javascript
ScrollReveal().reveal('.anime',{
    duration: 1000, //アニメーションの長さ
    delay: 500      //アニメーションの遅延
});
```
試しに動かすとこんな感じ↓
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="css,result" data-user="tricolorebox" data-slug-hash="OJVVVLE" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="ScrollReveal-sample01">
  <span>See the Pen <a href="https://codepen.io/tricolorebox/pen/OJVVVLE">
  ScrollReveal-sample01</a> by tricolorebox (<a href="https://codepen.io/tricolorebox">@tricolorebox</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>


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

### さて、こまった！
スクロールで要素が出てきた後で、アクセントとしてアイコン画像を動かしたいのですが（※イメージとしては[auトップページ](https://www.au.com/)）細かいアニメーションには対応していません:disappointed_relieved:

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

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

```javascript:Javascript
ScrollReveal().reveal('.anime',{
    afterReveal: function (el){
        el.classList.add('is-visible');
    }
});
```
このような書き方になります。

### CSSでアイコン用のアニメーションを設定する
最後にアイコン用のアニメーションを設定します。
繋がったアイコン画像を読み込んでアニメーションを設定します。
今回は１コマ96x96として、用意したのはこんな感じのイラスト↓
![sample_anim.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/184921/0a9dc13b-4f07-0ebc-f830-5886b14e64d2.png)

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

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

```css: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*/
  }
}
```

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

<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="css,result" data-user="tricolorebox" data-slug-hash="mdJJJMj" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="ScrollReveal-sample02">
  <span>See the Pen <a href="https://codepen.io/tricolorebox/pen/mdJJJMj">
  ScrollReveal-sample02</a> by tricolorebox (<a href="https://codepen.io/tricolorebox">@tricolorebox</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

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