Zoom Slider

JavaScript

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

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

Zoom Slider

デモ

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

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

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

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

Zoom Slider

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

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

関連記事

  1. Captall

    JavaScript

    画像やDOM要素の上にキャプションを表示することができるjQueryプラグイン「Captall」

    CaptallというjQueryプラグインを使えば、画像や設定したDO…

  2. Tosrus

    JavaScript

    スマホやタブレットにも対応するLightbox風のjQueryプラグイン「Tosrus」

    TosrusというjQueryプラグインを使えば、スワイプやスクロール…

  3. underline.js

    JavaScript

    遊び心あるアニメーションと美しさを追求したアンダーライン「underline.js」

    underline.jsはアニメーションが付いた美しいアンダーラインを…

  4. no-image

    JavaScript

    オシャレなスクロールエフェクトを実装できる「jQuery Smoove」

    jQuery Smooveは、オシャレなスクロールエフェクトを実装する…

最近の記事

  1. スタバ ドリップコーヒー
  2. エチオピア
  3. 紗々 飴色和栗
  4. DCG-CA21
  5. Apple WatchでのMacロック解除を無効

アーカイブ

PAGE TOP