no-image

JavaScript

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

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

Expanding Grid Item Animation

デモ

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

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

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

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

Expanding Grid Item Animation

関連記事

  1. sidebar-nav

    JavaScript

    ツリー型のサイドナビゲーションを実装できる「sidebar-nav」

    sidebar-navはツリー型でレスポンシブに対応したサイドナビゲー…

  2. Rebox

    JavaScript

    レスポンシブ対応の軽量なLightbox風jQueryプラグイン「Rebox」

    ReboxというjQueryプラグインを使えば、レスポンシブに対応した…

  3. Parallaxor

    JavaScript

    美しいパララックス効果を最小限のコードで実装できるjQueryプラグイン「Parallaxor」

    Parallaxorは最小限のミニマルなコードで美しいパララックス効果…

  4. JavaScript

    JavaScriptの基本構文を忘れた!って時にサクっと見たい10項目

    最近はよくjQueryプラグインを使ったりすることが多くなってきたので…

  5. Jqx-Media-Slider
  6. no-image

    JavaScript

    オーバーレイによるシンプルなアラートを実装できるjQueryプラグイン「simplert」

    simplertはオーバーレイによるシンプルで美しいアラートを実装する…

最近の記事

  1. レンズペン3 ミニプロとレンズペン ELITE マイクロプロ
  2. カメラマングローブ Grip Hot Shot III
  3. 包(つつむ)巾着ポーチ
  4. KMC-80BK

Instagram始めました

Facebookページ

PAGE TOP