Radial SVG Slider

JavaScript

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

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

Radial SVG Slider

デモ

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

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

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

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

Radial SVG Slider

AnkerのUSB-CハブPower Delivery対応!USBやHDMIポートを搭載したAnkerのUSB-Cハブ前のページ

シンプルで手軽に実装できるモーダルウィンドウ「tingle.js」次のページtingle.js

最近の記事

  1. ブリーズライト
  2. ペタコロ
  3. ジェットウォッシャー
  4. 縦置きスタンド
PAGE TOP