yup

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)

 

こちらもおすすめ!▼


新しい働き方にチャレンジしたいあなたへ。

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

新しい働き方が加速する今こそ、キャリアの選択肢を広げるフリーランス・複業・副業向けお仕事マッチングサービス『Workshipをのぞいてみませんか?

  • 朝日新聞社、mixi、リクルートなど人気企業も多数登録
  • 公開中の募集のうち50%以上がリモートOKのお仕事
  • 土日、週1、フルタイムなどさまざまなお仕事が掲載
  • 万一のトラブル時にも無料で賠償責任保険つき
  • マッチング〜面談まで全てWorkship内で完結
  • お仕事成約でお祝い金1万円プレゼント!

登録から案件獲得まで、いっさいお金はかかりません。詳細は以下ページをご覧ください!

>フリーランス・複業・副業ワーカーの方はこちら

>法人の方はこちら

SHARE

RELATED

  • お問い合わせ
  • お問い合わせ
  • お問い合わせ