Zoom Slider

JavaScript

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

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

Zoom Slider

デモ

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

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

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

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

Zoom Slider

関連記事

  1. JavaScript

    jQueryで好きな要素を浮遊させることができるプラグイン「jqFloat」を使ってみた

    指定した要素をフワフワと浮遊させることができる面白いプラグインを使って…

  2. ssi-modal

    JavaScript

    フレキシブルでパワフルなモーダルウィンドウを実装できる「ssi-modal」

    ssi-modalはカスタマイズ性に優れたフレキシブルでパワフルなモー…

  3. TV Credits

    JavaScript

    垂直・水平方向に滑らかに流れていくティッカーを実装できるjQueryプラグイン「TV Credits…

    TV Creditsは垂直方向や水平方向に流れていくティッカーを実装す…

  4. Solution for Long Drop Down Items

    JavaScript

    長いメニューもスクロールで表示できる「Solution for Long Drop Down Ite…

    長いドロップダウンメニューでもスクロール表示してくれるjQueryを活…

  5. Select.js

    JavaScript

    セレクトボックスをオシャレにスタイリングしてくれるJS・CSSライブラリ「Select.js」

    Select.jsはセレクトボックスをシンプルでオシャレにスタイリング…

  6. no-image

最近の記事

  1. USB-2H401BKN
  2. Dyson Pure Cool Me
  3. ルック セレクション
  4. シルキーウインドモバイル

アーカイブ

PAGE TOP