Animated SVG Image Slider

Web Information

SVGのpathを使ったイメージスライダー「Animated SVG Image Slider」

Animated SVG Image SliderはSVGのpathを使ったシンプルなレスポンシブ対応のイメージスライダーです。スライド時のアニメーションの形状がとても変わっていておもしろいですね。

Animated SVG Image Slider

デモ

一見普通のスライダーのように見えますが、左右の矢印または下部ナビゲーションから画像をスライドさせてみると、珍しいアニメーションで切り替わっていきます。

アニメーションはLINE1、LINE2、CURVEの3種類用意されています。個人的にCURVEが気にいりました。画像がカーブしながらスライドしていくエフェクトになっています。

スライド時に「おっ!」と思わせたくなるようなスライダーを実装したい時に取り入れてみたいですね。アニメーション自体もとっても滑らかなのでスライドするのが心地よくなってきます。

そんなわけで、SVGのpathを使ったちょっと珍しいアニメーションのスライダー「Animated SVG Image Slider」のご紹介でした。

Animated SVG Image Slider

関連記事

  1. Web Information

    ホームページを直感的で簡単に作成できるWixの新エディタを使ってみた【PR】

    プロが作ったようなホームページを簡単に作成できるウェブサイトビルダー「…

  2. SVG Loaders
  3. さくらレンタルサーバーからエックスサーバーへの移転手順

    Web Information

    さくらレンタルサーバーからエックスサーバーにWordPressを移転する手順

    自分が管理運営している、あるWordPressサイトのサーバー移転が無…

  4. iPhone画面を横向きで固定

    Web Information

    iPhone画面を横向きに固定してロックさせる方法

    iPhoneを使っていると画面が縦になったり横になったりすることがあり…

  5. Responsive Inspector
  6. Nexus 5でテザリングしてiPhoneを接続

    Web Information

    Nexus 5でテザリングしてiPhoneをネットに接続させるやり方

    Nexus 5でテザリングしてiPhoneをネットに接続させるやり方を…

最近の記事

  1. Soundcore Ace A1
  2. cheero USB-C PD Charger 60W
  3. DY-S01
  4. OWL-QI10W04

アーカイブ

PAGE TOP