no-image

JavaScript

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

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

Expanding Grid Item Animation

デモ

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

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

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

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

Expanding Grid Item Animation

関連記事

  1. gridslide.js

    JavaScript

    いろんな方向に画像をスライドできるjQueryイメージスライダー「gridslide.js」

    gridslide.jsはいろんな方向に画像をスライドさせることができ…

  2. SweetDropdown

    JavaScript

    スタイリッシュで多彩なドロップダウンを実装できる「SweetDropdown」

    SweetDropdownは、多彩なドロップダウンを実装することができ…

  3. Responsive jQuery Pop Up Gallery
  4. no-image

    JavaScript

    親要素の下端まで要素を固定表示できる「Scroll With Page」

    Scroll With Pageはスクロールしても特定の要素を固定表示…

  5. jQuery Responsive Thumbnail Gallery Plugin

    JavaScript

    レスポンシブなサムネイル付きのイメージギャラリーを実装できる「jQuery Responsive T…

    レスポンシブなサムネイル付きのイメージギャラリーを実装できる「jQue…

  6. JavaScript

    画像を素敵なアニメーションで次々に表示させるjQueryのイメージギャラリー「Heap Shot」

    とても素敵な画像の見せ方だったのでご紹介します。jQueryプラグイン…

最近の記事

  1. Soundcore Ace A1
  2. cheero USB-C PD Charger 60W
  3. DY-S01
  4. OWL-QI10W04

アーカイブ

PAGE TOP