no-image

JavaScript

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

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

Expanding Grid Item Animation

デモ

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

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

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

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

Expanding Grid Item Animation

関連記事

  1. bubbly-bg

    JavaScript

    幻想的なバブル背景アニメーションを実装できる「bubbly-bg」

    bubbly-bgは幻想的で美しいバブル(気泡)背景アニメーションを実…

  2. jQuery Parallax

    JavaScript

    美しいパララックススクロールエフェクトを実装できる「jQuery Parallax」

    jQuery Parallaxは美しいパララックススクロールエフェクト…

  3. css3-mediaqueries-js

    JavaScript

    Media QueriesをIE8以下でも使えるようにするための「css3-mediaqueries…

    前回、Media Queriesの@mediaを使用したCSSをまとめ…

  4. zelect

    JavaScript

    セレクトボックスをカスタマイズして使いやすくしてくれる「zelect」

    zelectはセレクトボックスをユーザーが使いやすくなるようにカスタマ…

  5. FitVids.JS

    JavaScript

    YouTubeやVimeoからの埋め込み動画をレスポンシブにするjQueryプラグイン「FitVid…

    YouTubeやVimeoからの埋め込み動画をレスポンシブに対応させる…

  6. pull-to-reload

    JavaScript

    下へ引いてページをリフレッシュ(リロード)できる「pull-to-reload」

    pull-to-reloadは、Webページ内で下へ引くだけでページを…

最近の記事

  1. Anker PowerWave 10 Pad & Stand セット
  2. ミノン メン 薬用全身シャンプー

アーカイブ

PAGE TOP