CSS3やJavaScriptによってWebベースのアニメーションは実装しやすくはなっていますが、だからといって誰でも簡単にできるものではありません。単純に右から左へ動かすならまだしも、雰囲気のいい感じに流れていくとなれば細かな制御が必要になります。

そんなアニメーションを作るのは大変ですが、固定的な動きであればライブラリを探してみるのも良さそうです。今回は下から上に流れてくるアニメーションライブラリscrollReveal.jsを紹介します。

何はともあれまずは動画で見てください。

スクロールすると下から上にオブジェクトがアニメーションして配置についていきます。いい感じでしょう？

使い方としては下のようなHTMLを記述します。

<div class="column">
  <div class="block block-1x block-slate" data-scrollreveal="enter top over 3s after 0.5s"></div>
  <div class="block block-2x block-mango" data-scrollreveal="enter right after 0.5s"></div>
  <div class="block block-1x block-kiwi" data-scrollreveal="enter bottom over 1s and move 300px after 0.3s"></div>
  <div class="block block-3x block-blueberry" data-scrollreveal="enter top over 0.5s and move 200px"></div>
  <div class="block block-2x block-raspberry" data-scrollreveal="enter bottom over 1s and move 100px"></div>
  <div class="block block-1x block-grape" data-scrollreveal="enter top"></div>
</div>

data-scrollrevealでアニメーションを制御しています。JavaScriptやスタイルシートで細かく記述するのではなく、文字で指定するというスタイルは分かりやすいかも知れません。決まったアニメーションのみになりそうですが、それでも使えるケースはあるでしょう。 scrollReveal.jsはJavaScript製のオープンソース・ソフトウェア（MIT License）です。 scrollReveal.js julianlloyd/scrollReveal.js