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

no-imageタブやアコーディオンを実装できるjQueryプラグイン「jpix」前のページ

数値を手軽にアップ・ダウンできるステッパーを実装できる「Stepper.js」次のページStepper.js

関連記事

  1. Responsive 3d Fold Scroll
  2. Slickhover.js

    JavaScript

    滑らかでスムーズなホバーエフェクトを実装できるjQueryプラグイン「Slickhover.js」

    とても軽量で使いやすいのがいいですね。ホバー時に滑らかでスムーズなエフ…

  3. JavaScript

    JavaScriptで連想配列(ハッシュ)から1つずつ値を取り出して配列に入れてランダムで取得する

    タイトルが分かりづらくてあれなんですが、JavaScriptの連想配列…

  4. Greedy Navigation

    JavaScript

    レスポンシブ対応でメニューのアイテム数がわかりやすい「Greedy Navigation」

    Greedy Navigationはレスポンシブ対応でメニューのアイテ…

  5. Uglipop.js

    JavaScript

    軽量でミニマルなモーダルボックスを実装できる「Uglipop.js」

    Uglipop.jsは軽量でミニマル、カスタマイズ性にも優れたモーダル…

最近の記事

  1. サーモンアボカドサラダラップとドリップ
  2. 猿田彦フレンチ
  3. Zarigani Curry 挽肉のカレー ゴーダチーズとピクルスを添えて
  4. ビジネスホテル
  5. ドリップコーヒー

アーカイブ

PAGE TOP