Radial SVG Slider

JavaScript

放射状に切り替わるスライダーを実装できる「Radial SVG Slider」

Radial SVG Sliderは、放射状に広がりながら切り替わるスライダーを実装することができます。SVGのクリッピングパスやマスクが使われています。スライダーはレスポンシブに対応しているほか、シンプルなデザインと操作性でとても見やすく快適ですね。

Radial SVG Slider

デモ

スライダーは左右にある矢印から切り替えることができます。放射状に広がっていくアニメーションが、とても滑らかで素敵ですね。

放射状の基点となるポイントは、クリックしたときの矢印になります。右側の矢印をクリックするとそこを中心に広がっていき、左側の矢印をクリックすると、そこを中心に広がっていきます。

これなら、前後どちらへスライドさせたのかを直感的に理解することができますね。

シンプルだけどダイナミックに切り替わる、そんなレスポンシブに対応したスライダーを求めている人は、ぜひチェックしてはいかがでしょうか?

Radial SVG Slider

関連記事

  1. JavaScript

    カスタマイズも自由にできるjQuery「bxSlider」の使い方

    個人的にかなりよさげなjQueryスライダーを使ってみました。その名も…

  2. JavaScript

    JavaScriptで連想配列(ハッシュ)から1つずつ値を取り出して配列に入れてランダムで取得する

    タイトルが分かりづらくてあれなんですが、JavaScriptの連想配列…

  3. JavaScript

    jQueryの基本的なセレクターを適当に試してみる

    自分の勉強用としてちょっと適当に試してみました。jQueryの基本のセ…

  4. evol-colorpicker

    JavaScript

    マイクロソフト オフィス2010のようなカラーピッカー「evol-colorpicker」

    evol-colorpickerは、マイクロソフト オフィス2010の…

  5. Jquery progress indicator on page scroll

最近の記事

  1. スタバのドリップのホットのショート
  2. LE エルイー 6 PANEL CAP
  3. タリーズ ハウスブレンド
  4. BAG-TW1BKシリーズ

アーカイブ

PAGE TOP