WOW.js - JavaScript/CSS3でスクロール連動型アニメーション
最近Webサイトでアニメーションしながら表示される所が増えています。かといってかつてあったFlashのようにスプラッシュ的なものではなく、表示構成要素がさりげなくアニメーションしながら配置されていくといった感じです。 それはCSS3のアニメーションで作られているのですが、スクロールと組み合わせて容易に実現してくれるのがWOW.jsです。
何はともあれ動画を見てもらうのが良いと思います。
犬や猫のアイコンがアニメーションしながら表示されていきます。スクロールの感知はJavaScriptで行っていますが、実際のアニメーションはCSSアニメーションによるものです。
実用的にどうなの、と思ったのですが以下のサイト(利用例)を見るとかなりいけてることが分かります。
1640 iOS7 Icons for designers & Developers | Streamline Icons
Fliplingo - Translation Automated on Twitter
Nasty Icons. 45 free vector icons to spice up your designs!
スクロールとアニメーションを組み合わせる試みは既に行われていますが、WOW.jsを使うとかなり実用的に使えるのではないでしょうか。スプラッシュのように何度も再生するとうざったくなりますが、ごく小さなアニメーションを組み合わせるのであればありだと思います。 WOW.jsはJavaScript/CSS3製のオープンソース・ソフトウェア(MIT License)です。
WOW.js - Reveal Animations When You Scroll. Very Animate.css Friend. matthieua/WOW