Zoom Slider

JavaScript

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

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

Zoom Slider

デモ

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

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

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

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

Zoom Slider

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

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

関連記事

  1. no-image

    JavaScript

    豊富なオプションでカスタマイズ性も高いjQueryスライダー「startVal」

    startValは豊富なオプションやAPIを有したカスタマイズ性の高い…

  2. jquery.horizonScroll.js
  3. jquery.autoscroll-text-tape
  4. BetterToggle

    JavaScript

    要素を拡大しながら表示させたり非表示にしたりできるjQueryプラグイン「BetterToggle」…

    面白いjQueryプラグインがあったのでご紹介します。指定した要素を拡…

  5. share-this

    JavaScript

    テキストを選択してシェアできるMediumライクな「share-this」

    share-thisはテキストを選択して手軽にTwitterやFace…

  6. JavaScript

    虫メガネのようにマウスを置いた所を拡大することができるjQueryプラグイン「mlens」

    虫メガネのようにマウスを置いた所を拡大することができるjQueryプラ…

最近の記事

  1. COMOLI ベタシャンCPOシャツ(サックス)
  2. ハワイアナス ビーチサンダル
  3. 蓮の花
  4. チキンアラビアータ 石窯フィローネ
  5. ユニクロ ポロシャツ

アーカイブ

PAGE TOP