【MBTI診断】16タイプ別・フリーランスに向いてる仕事/働き方
- コラム
- フリーランス/個人事業主
- 働き方
anime.jsは、なめらかなアニメーションを制作したい人にぴったりのライブラリです。
今回はこのanime.jsを使って、なめらかに動くグリッドレイアウトを作ってみました。
以下のように、グリッド状に並べたサムネイルが、さまざまな効果とともに拡大・縮小されます。
anime.jsは最近、新しいバージョンをリリースしました。リリースされた機能のうち特に注目したいのが、複雑なフォロースルーとオーバーラッピング・アニメーションをシンプルにしてくれるシステムです。
今回はグリッド状に配置されたサムネイルでこの新機能を試し、4つのデモを作ってみました。小さなサムネイルの下に隠してあるコンテンツを、それぞれ異なる効果とともに表示します。
クリックしたところを中心にサムネイルが消えていきます。閉じるときはその逆です。
サムネイルがフェードし、端から画像を表示します。閉じるときも同じようにサムネイルを表示します。
選んだサムネイルに関わらず、右下隅に向かってサムネイルが消えていきます。
もっとも遊び心を発揮したのが、こちらのバージョンです。
選択したものを中心にサムネイルが落下して、閉じるときにはサムネイルが下から元の位置に移動します。
今回は、anime.jsの特徴を活かしたデモを4種類ご紹介しました。
ぜひご自身のアニメーション制作に役立ててみてください!
(原文:Mary Lou 翻訳:Asuka Nakajima)
こちらもおすすめ!▼
動的なグリッドレイアウトのWebページテンプレートのご紹介
Workship MAGAZINE
複数枚のスライドを階段状に表示するスライドショーのご紹介
Workship MAGAZINE
anime.jsで作る、なめらかに動くグリッドレイアウトのデモ4選
Workship MAGAZINE