エンジニアの副業は週1からでも可能？副業の例や探し方も解説
- ITエンジニア
- 副業
anime.jsは、なめらかなアニメーションを制作したい人にぴったりのライブラリです。
今回はこのanime.jsを使って、なめらかに動くグリッドレイアウトを作ってみました。
以下のように、グリッド状に並べたサムネイルが、さまざまな効果とともに拡大・縮小されます。
anime.jsで作った4つのデモ
anime.jsは最近、新しいバージョンをリリースしました。リリースされた機能のうち特に注目したいのが、複雑なフォロースルーとオーバーラッピング・アニメーションをシンプルにしてくれるシステムです。
今回はグリッド状に配置されたサムネイルでこの新機能を試し、4つのデモを作ってみました。小さなサムネイルの下に隠してあるコンテンツを、それぞれ異なる効果とともに表示します。
デモ1
クリックしたところを中心にサムネイルが消えていきます。閉じるときはその逆です。
デモ2
サムネイルがフェードし、端から画像を表示します。閉じるときも同じようにサムネイルを表示します。
デモ3
選んだサムネイルに関わらず、右下隅に向かってサムネイルが消えていきます。
デモ4
もっとも遊び心を発揮したのが、こちらのバージョンです。
選択したものを中心にサムネイルが落下して、閉じるときにはサムネイルが下から元の位置に移動します。
まとめ
今回は、anime.jsの特徴を活かしたデモを4種類ご紹介しました。
ぜひご自身のアニメーション制作に役立ててみてください！
（原文：Mary Lou 翻訳：Asuka Nakajima）
こちらもおすすめ！▼
動的なグリッドレイアウトのWebページテンプレートのご紹介
Workship MAGAZINE
複数枚のスライドを階段状に表示するスライドショーのご紹介
Workship MAGAZINE
anime.jsで作る、なめらかに動くグリッドレイアウトのデモ4選
Workship MAGAZINE
人気のフリーランス・副業求人
【リモートワークOK】大手からスタートアップまで、幅広い領域でユーザー体験を担うデザイナー/アートディレクター募集！
- #副業OK
- #新規事業
- #スタートアップ
- #急募
- #長期案件
- #スポット案件（1ヶ月）
- #フルリモートOK
職種：デザイナー
時給：2,500円 〜 4,000円
働き方：どちらでも可
エリア：東京都
【リモート可】【子育てママ歓迎】IoTサービスで世界中の家族を幸せに。アプリデザイナー(スマホ・タブレット) /Webデザイナー募集
- #スタートアップ
職種：デザイナー
時給：2,000円 〜
働き方：どちらでも可
エリア：東京都
【リモートOK】アート・エンタメ×ITでイノベーションを！新規事業のデザイナー募集！
- #スタートアップ
- #土日週末OK
- #急募
- #長期案件
- #正社員募集
- #フルリモートOK
職種：デザイナー
時給：5,000円 〜 8,000円
働き方：どちらでも可
エリア：東京都
Codrops is a web design and development blog that publishes articles and tutorials about the latest web trends, techniques and new possibilities. The team of Codrops is dedicated to provide useful, inspiring and innovative content that is free of charge.
この記事はcodropsからの転載です。配信元または著者とコンテンツ契約を結び配信しています。
Grid Reveal Effects with Anime.js
