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. jR3DCarousel

    JavaScript

    レスポンシブな3Dカルーセルを実装できる「jR3DCarousel」

    jR3DCarouselはレスポンシブな3Dカルーセルを実装できるjQ…

  2. Micromodal.js

    JavaScript

    アクセシブルで軽量なモーダルダイアログを実装できる「Micromodal.js」

    Micromodal.jsは、アクセシブルでファイル容量も軽量なモーダ…

  3. JavaScript

    テキストを中央に向かうにつれて大きくしたりできるjQueryプラグイン「jqIsoText」

    結構おもしろかったのでメモしときます。テキストに簡単なエフェクトをかけ…

  4. no-image

    JavaScript

    タッチフレンドリーでモバイルでも快適に動作する「simplelightbox」

    simplelightboxはレスポンシブ対応でタッチフレンドリーなl…

  5. no-image

    JavaScript

    Lightboxスタイルのギャラリーやカルーセルを実装できる「slideBox.js」

    slideBox.jsはレスポンシブに対応したLightboxスタイル…

  6. jQuery Navobile

最近の記事

  1. ライオン システマ 超コンパクト ふつう
  2. タリーズ ハムチーズ&サラダサンド
  3. クリニカのY字タイプのフロス
  4. 日和山公園の桜
  5. 成城石井 フレンチロースト

アーカイブ

PAGE TOP