Zoom Slider

JavaScript

ズーム機能を備えたシンプルなコンテンツスライダー「Zoom Slider」

Zoom Sliderは奥行き感を演出したズーム機能を備えたシンプルなコンテンツスライダーです。ズームアイコンをクリックすると奥からズームしてくる感じでアニメーションされます。見た目はシンプルですが動きはダイナミックですね。

Zoom Slider

デモ

画面下部には前後移動できる左右の矢印アイコンが用意されています。クリックでコンテンツをスライドさせることができます。クイックな動きをするスライドなので、スピード感を出したい時なんかによさそうですね。

また、矢印アイコンの間にある虫眼鏡のアイコンをクリックすると詳細ページへズームされます。奥からグワーンとズームしてきます。戻る時はこれとは逆のアニメーションで元の状態に戻ります。

フルスクリーンを活用したアニメーションはとても見応えがありますね。

ダイナミックなズーム機能を搭載したコンテンツスライダーを実装したい方は是非チェックしてみてください。

Zoom Slider

関連記事

  1. Ink Transition Effect

    JavaScript

    インクをこぼしたようなエフェクトを実装できる「Ink Transition Effect」

    Ink Transition Effectはインクがこぼれて広がったよ…

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

    JavaScript

    jQueryのeachメソッドのお勉強

    今回はjQueryのeachメソッドを使ってみました。なんかとても便利…

  3. jQueryを使わないコード集

    JavaScript

    jQueryを使わないでコードを書くTips集

    jQueryを使えば簡単にできることがたくさんあるんですが、ちょっとし…

  4. HoldOn.js

    JavaScript

    ユーザーの待機中に表示させるアニメーション実装「HoldOn.js」

    HoldOn.jsはユーザーが待機している間に表示させるアニメーション…

  5. Bootstrap Dropdown Hover
  6. 2013年上半期jQueryプラグインまとめ

    JavaScript

    2012年に紹介したjQueryプラグインのまとめ

    当ブログで2012年にご紹介したjQueryプラグインをまとめてみまし…

最近の記事

  1. Happy Plugs AIR1
  2. cheero Stream 10000mAh
  3. BOSE HOME SPEAKER 300
  4. RP-PC112
  5. SRS-XB402M

アーカイブ

PAGE TOP