Radial SVG Slider

JavaScript

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

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

Radial SVG Slider

デモ

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

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

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

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

Radial SVG Slider

関連記事

  1. Radial Progress Bars

    JavaScript

    アニメーション付きのサークルプログレスバー「Radial Progress Bars」

    Radial Progress Barsは、アニメーション付きのサーク…

  2. Square Menu
  3. JavaScript

    レスポンシブにも対応している人気のjQueryプラグインのスライダー「Nivo Slider」の使い…

    レスポンシブにも対応している人気のjQueryプラグイン「Nivo S…

  4. no-image

    JavaScript

    縦スクロールによるフォトギャラリー実装「Simple Scroll Gallery」

    Simple Scroll Galleryは縦スクロールによるかっこい…

  5. justContext.js

    JavaScript

    シンプルなコンテキストメニューを実装できる「justContext.js」

    justContext.jsはjQueryなどを必要とせずに(ピュア …

  6. JavaScript

    レスポンシブやスワイプ対応で完成度の高いスライダーのjQueryプラグイン「Slider Pro」

    Slider Proはレスポンシブやタッチ・スワイプに対応したスライダ…

最近の記事

  1. mill オイルヒーター
  2. Anker PowerWave 10 Pad & Stand セット

アーカイブ

PAGE TOP