FREENANCE Ad

anime.jsで作る、なめらかに動くグリッドレイアウトのデモ4選

anime.js
FREENANCE Ad
DESIGNER

anime.jsは、なめらかなアニメーションを制作したい人にぴったりのライブラリです。

今回はこのanime.jsを使って、なめらかに動くグリッドレイアウトを作ってみました。

以下のように、グリッド状に並べたサムネイルが、さまざまな効果とともに拡大・縮小されます。

anime.js

anime.jsで作った4つのデモ

anime.jsは最近、新しいバージョンをリリースしました。リリースされた機能のうち特に注目したいのが、複雑なフォロースルーとオーバーラッピング・アニメーションをシンプルにしてくれるシステムです。

今回はグリッド状に配置されたサムネイルでこの新機能を試し、4つのデモを作ってみました。小さなサムネイルの下に隠してあるコンテンツを、それぞれ異なる効果とともに表示します。

デモ1

クリックしたところを中心にサムネイルが消えていきます。閉じるときはその逆です。

anime.js

デモ2

サムネイルがフェードし、端から画像を表示します。閉じるときも同じようにサムネイルを表示します。

anime.js2

デモ3

選んだサムネイルに関わらず、右下隅に向かってサムネイルが消えていきます。

anime.js3

デモ4

もっとも遊び心を発揮したのが、こちらのバージョンです。

選択したものを中心にサムネイルが落下して、閉じるときにはサムネイルが下から元の位置に移動します。

anime.js4

まとめ

今回は、anime.jsの特徴を活かしたデモを4種類ご紹介しました。

ぜひご自身のアニメーション制作に役立ててみてください!

(原文:Mary Lou 翻訳:Asuka Nakajima)

 

こちらもおすすめ!▼

SHARE

  • 広告主募集
  • ライター・編集者募集
  • WorkshipSPACE
週2日20万円以上のお仕事多数
Workship