no-image

JavaScript

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

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

Expanding Grid Item Animation

デモ

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

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

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

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

Expanding Grid Item Animation

関連記事

  1. Text Effects

    JavaScript

    テキストがカシャカシャ切り替わって表示するjQueryプラグイン「Text Effects」

    Text EffectsというjQueryプラグインを使えば、テキスト…

  2. jQuery Responsive Tabs
  3. JavaScript

    画像の一部をカッコよく拡大したりできるjQueryプラグイン「Loupe」

    こうゆうプラグインは初めて使ってみたんですが、とても面白いですね。Lo…

  4. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQueryでsetTimeoutを使えば各要素のアニメーションを実行させる時間を調整できる

    jQueryのsetTimeoutを使えば何秒後に実行するかといったこ…

  5. JavaScript

    ニュースやお知らせなどに使えるティッカー「jQuery WebTicker」

    ニュースやお知らせなんかに使えるティッカー「jQuery WebTic…

  6. no-image

    JavaScript

    ウィークデイ(週)のオプションを作成できる「jquery-weekdays」

    jquery-weekdaysはウィークデイ(週)のオプションを作成で…

最近の記事

  1. ルック セレクション
  2. シルキーウインドモバイル
  3. アリエール パワージェルボール3D
  4. NuAns × Shibaful TAGPLATE

アーカイブ

PAGE TOP