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. ClassyCountdown

    JavaScript

    スタイリッシュな円形カウントダウンのjQueryプラグイン「ClassyCountdown」

    ClassyCountdownはシンプルでスタイリッシュな円形カウント…

  2. jQuery touchSwipe Carousel
  3. Animocons

    JavaScript

    アイコンに素敵なアニメーションを実装できる「Animocons」

    Animoconsはアイコンにさまざまなアニメーションを加えることがで…

  4. lightgallery.js
  5. Section Scroller

    JavaScript

    セクションごとに自動でスクロールしてくれるボタン実装「Section Scroller」

    Section Scrollerは、セクションごとにスムーズにスクロー…

  6. Multi-device scrolling menu

最近の記事

  1. クッキー&クリーム ポップコーン
  2. マウイチップス マウイオニオン味
  3. グリーンビーントゥーバー
  4. VS-543AS

アーカイブ

PAGE TOP