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. jQuery_Overlay_Menu
  2. no-image

    JavaScript

    シンプルでエレガントなモーダルボックスを実装できる「Fallr.js」

    Fallr.jsはシンプルでエレガントなモーダルボックスを実装できるj…

  3. Slideme

    JavaScript

    スライドでコンテンツを魅せることができるjQueryプラグイン「Slideme」

    SlidemeというjQueryプラグインを使えばコンテンツをスライド…

  4. no-image

    JavaScript

    シンプルでパワフルなセレクトボックスを実装できる「SelectPage」

    SelectPageはシンプルながらも高いカスタマイズ性を備えたパワフ…

  5. no-image

    JavaScript

    チェックボックスをアニメーショントグルにする「jquery-simpletoggler」

    jquery-simpletogglerは、デフォルトのチェックボック…

  6. Lightense Images

最近の記事

  1. オータムスイートポテトフラペチーノ
  2. 紅葉
  3. ナノケア EH-NA0E
  4. スターバックス コロンビア サンタンデール

アーカイブ

PAGE TOP