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

anime.js
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)

 

こちらもおすすめ!▼

40,000人以上が使う!日本最大級のフリーランス・副業向けマッチングサービス『Workship』

「フリーランスとして、もっと大きな仕事にかかわりたいな……」
「企業で働いてるけど、副業でキャリアを広げていきたいな……」
「報酬が低くて疲弊している。もっと稼げるお仕事ないかな……」

フリーランス・副業向けマッチングサービス『Workship(ワークシップ)』が、そんな悩みを解決します!

  • 累計40,000人以上のフリーランス・副業ワーカーが登録
  • 東証プライム上場企業からスタートアップまで多数参加
  • 土日、週1、フルタイムなどさまざまな働き方あり
  • 公開中の募集のうち66%がリモートOKのお仕事
  • 時給1,500円〜10,000円の高単価案件のみ掲載
  • お仕事成約でお祝い金10,000円プレゼント!

利用料は一切かかりません。一度詳細をのぞいてみませんか?

※Workship MAGAZINEでは日々情報の更新に努めておりますが、掲載内容は最新のものと異なる可能性があります。当該情報について、その有用性、適合性、完全性、正確性、安全性、合法性、最新性等について、いかなる保証もするものではありません。修正の必要に気づかれた場合は、サイト下の問い合わせ窓口よりお知らせください。また、本メディア内に掲載されているリンクには、アフィリエイトURLが含まれる可能性があります。

SHARE

  • 広告主募集
  • ライター・編集者募集
  • WorkshipSPACE
デザイナー副業案件