Radial SVG Slider

JavaScript

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

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

Radial SVG Slider

デモ

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

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

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

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

Radial SVG Slider

関連記事

  1. FitVids.JS

    JavaScript

    YouTubeやVimeoからの埋め込み動画をレスポンシブにするjQueryプラグイン「FitVid…

    YouTubeやVimeoからの埋め込み動画をレスポンシブに対応させる…

  2. Product Tour

    JavaScript

    レスポンシブなプロダクトツアーを実装できるCSS・jQuery「Product Tour」

    Product Tourはレスポンシブに対応したプロダクトツアーを実装…

  3. Image Gallery Threejs
  4. AnimateScroll

    JavaScript

    面白いエフェクトのページ内スクロールを実装できるjQueryプラグイン「AnimateScroll」…

    ページの任意の場所にスクロールできるjQueryプラグイン「Anima…

  5. JavaScript

    画面全体に背景を表示させフェードやスライドもできるjQuery「bgStretcher」

    ブラウザの画面全体に背景を表示させることができるjQueryプラグイン…

  6. Simple jQuery Slider

    JavaScript

    シンプルなナビ付きのスライダーを実装できる「Simple jQuery Slider」

    シンプルなスライダーを実装できる「Simple jQuery Slid…

最近の記事

  1. ルック セレクション
  2. シルキーウインドモバイル
  3. アリエール パワージェルボール3D
  4. NuAns × Shibaful TAGPLATE

アーカイブ

PAGE TOP