ITエンジニア/デザイナ向けにオープンソースを毎日紹介

最近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

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2