Inspiration for Grid Loading Animations

JavaScript

グリッドアイテムをかっこよく表示するアニメーション「Inspiration for Grid Loading Animations」

Inspiration for Grid Loading Animationsは、グリッドアイテムを読み込んだ時にかっこいいアニメーションとともに表示させることができます。キレイに整列させたグリッドレイアウトに、オシャレなアニメーションまで加われば、注目度もグッとアップするはずです。

Inspiration for Grid Loading Animations

デモ

デモページでは、grid A、grid B、grid Cの3つのグリッドレイアウトを見ることができます(画像と画像の間の余白などの違いがあります)。

アニメーションは、右側にある「run effect」から好きなものを選択するとそのアニメーションが実行されます。

エフェクトは全部で15種類も用意されており、どれもスタイリッシュでとてもかっこいいです。画像が徐々に拡大されて表示されるもの、下からスライドで表示されるもの、回転しながら表示されるもの、バウンスされるもの、白い線で画像の淵を描きながら表示されるものなど、豊富なアニメーションがあります。

ちなみに、グリッドレイアウトにはMasonryを、アニメーションにはanime.jsを使用しているとのこと。

グリッドレイアウトにかっこいいアニメーションをプラスして、よりオシャレなWebページに仕上げたいという人は、ぜひ「Inspiration for Grid Loading Animations」をチェックしてみてはいかがでしょうか?

Inspiration for Grid Loading Animations

関連記事

  1. Timeliny

    JavaScript

    レスポンシブ対応の年ベースによるjQueryタイムライン「Timeliny」

    Timelinyはレスポンシブに対応した年ベースによるタイムラインを実…

  2. JavaScript

    レスポンシブで横スクロールやキーボード操作も可能なjQueryギャラリー「Portfoliojs」

    ポートフォリオなどでとても素敵なイメージギャラリーを実装することができ…

  3. no-image

    JavaScript

    円形に広がるメニュー実装「expanding action button」

    expanding action buttonは円形に広がるメニューを…

  4. Slight Submenu
  5. no-image

最近の記事

  1. リンツ リンドール
  2. ジェットストリームの三色ボールペン(+シャーペン付き)と黒の替芯
  3. ブラジルイパネマ

アーカイブ

PAGE TOP