no-image

JavaScript

グリッドアイテムがスケールアップする「Expanding Grid Item Animation」

Expanding Grid Item Animationは、グリッドアイテムをスケールアップするアニメーションを実装することができます。目的のアイテムをクリックすると、そのアイテムが拡大してフルスクリーンで表示されます。Dribbble shotのSurf Projectをベースにしているとのこと。

Expanding Grid Item Animation

デモ

デモページではグリッドレイアウトでアイテムがいろいろ並べられています。各アイテムのサムネイルをクリックすると、そのアイテムに関する詳細がアニメーションとともにフルスクリーンで表示されます。

アイテムがグイッとスケールアップしてくるので注目しちゃいますね。スケールアップされた画面の右上にはバツ印があるので、ここをクリックすると元の状態に戻ります。

アイテムの価格や紹介文などはそのアイテムをクリックするまで表示されないので、トップページのデザインをスッキリさせることができますね。

また、スケールアップされた時のアイテムの画像には虫眼鏡のアイコンが設置されています。ここをクリックするとアイテムの画像をさらに拡大表示することが可能です。

Expanding Grid Item Animation

関連記事

  1. no-image
  2. ScrollMenu.js

    JavaScript

    縦横配置やナビメニューと統合できる便利なスクロールバー「ScrollMenu.js」

    ScrollMenu.jsは通常の味気ないスクロールバーを便利で新しい…

  3. Responsive Nav

    JavaScript

    レスポンシブ対応の軽量なナビゲーションを実装できる「Responsive Nav」

    レスポンシブ対応のナビゲーションを実装できる「Responsive N…

  4. JavaScript

    jQuery Backstretchを使えば超簡単にブラウザサイズに合った背景画像を表示できる

    背景画像をブラウザのサイズに合わせて表示できるプラグイン「jQuery…

  5. jQlouds

    JavaScript

    ふわふわと流れるアニメーション付きの雲を実装できるjQueryプラグイン「jQlouds」

    jQloudsというjQueryプラグインを使えば、ふわふわした雲を実…

  6. Tiny Colorpicker

最近の記事

  1. Soundcore Liberty Air 2
  2. Soundcore Liberty 2
  3. マザーツリー
  4. RICOH THETA SC2

アーカイブ

PAGE TOP