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

複数の写真が変わるアニメーションは格好いいですよ。

Animations for Thumbnail Gridsは複数の写真を切り替える際にアニメーションしながら表示してくれるライブラリです。アニメーションの種類も豊富で、印象深いエフェクトが実現できます。

このように奇麗にイラストが並んでいます。
このように奇麗にイラストが並んでいます。

例えばこれは下からスライドアップしながら不透明度が下がっていくエフェクト。
例えばこれは下からスライドアップしながら不透明度が下がっていくエフェクト。

こちらは右から左へスライドしてきます。
こちらは右から左へスライドしてきます。

こういったエフェクトは実際に動作しているデモを見るのが一番だと思いますので、ぜひ下の動画をご覧ください。

一つのスライドに対してエフェクトしながら切り替えるライブラリは幾つかありますが、Animations for Thumbnail Gridsのように6枚の写真ががらっと切り替わるのは珍しいのではないでしょうか。

Animations for Thumbnail Gridsはあまり汎用性のあるライブラリではなく、仕組みをどう作るべきかと言ったコード紹介に加えて実際のデモがあるといった形になっています。実際に使おうと思うとカスタマイズする必要があるでしょう。

とは言えこの考え方が分かれば他にも応用ができそうですよ。

Animations for Thumbnail GridsはCSS3/JavaScript製のソフトウェア(再配布禁止、個人商用問わず利用可)です。

Animations for Thumbnail Grids | Codrops http://tympanus.net/codrops/2013/10/23/animations-for-thumbnail-grids/

Animations for Thumbnail Grids | Demo 1 http://tympanus.net/Development/ThumbnailGridAnimations/

 

MOONGIFTの関連記事

  • DevRel
  • Com2