Zoom Slider

JavaScript

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

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

Zoom Slider

デモ

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

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

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

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

Zoom Slider

Letter by Letter JS美しいフェードでテキストが徐々に表示されていく「Letter by Letter JS」前のページ

長いテキストを自動で短縮してくれるjQueryプラグイン「Shorten」次のページShorten

関連記事

  1. Skitter

    JavaScript

    豊富なアニメーションでカスタマイズ性に優れたスライドショーを実装できる「Skitter」

    Skitterは豊富なアニメーションでカスタマイズ性に優れたスライドシ…

  2. no-image

    JavaScript

    フレキシブルでモバイルフレンドリーなフォトギャラリー実装「jGallery」

    jGalleryは、フレキシブルでモバイルフレンドリーなフォトギャラリ…

  3. no-image

    JavaScript

    水平スクロールができることを示唆してくれる「ScrollHint」

    ScrollHintは水平スクロールができることをポインタアイコンを使…

  4. spzoom

    JavaScript

    シンプルで使いやすい画像ズームを実装できるjQueryプラグイン「spzoom」

    spzoomはシンプルな操作性で使いやすい画像ズーム機能を実装できるj…

  5. no-image

    JavaScript

    立体的なナビゲーションメニューを実装できる「Sidebar Menu Concept」

    Sidebar Menu Conceptは立体的なナビゲーションメニュ…

  6. JavaScript

    blur効果で要素を簡単にぼかしてくれるjQueryプラグイン「Foggy」

    FoggyというjQueryプラグインを使ってみました。これを使えば指…

最近の記事

  1. 濃いアーモンドミルク
  2. COMOLI ベタシャンプルオーバーシャツ
  3. ユニクロ エアリズム マイクロメッシュVネックT(半袖)
  4. ライオン システマ 超コンパクト ふつう
  5. タリーズ ハムチーズ&サラダサンド

アーカイブ

PAGE TOP