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

    Googleニュースで自分の好きなキーワードのRSSを取得する方法

    何かのキーワードを調べたい時に、Googleニュースでそのキーワードの…

  2. Nexus 5でテザリングしてiPhoneを接続

    Web Information

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

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

  3. グラデーションクリエーター

    Web Information

    カラフルなグラデーションのCSSを作成できるChrome拡張機能「グラデーションクリエーター」

    グラデーションクリエーターというChrome拡張機能を使ってみました。…

  4. Web Information

    上質なjQueryプラグインをカテゴリー別に探したい時に便利なサイト「jquer.in」

    とてもよさそうなサイトだったのでメモがてらご紹介します。jQueryの…

  5. feedlyボタンを設置

    Web Information

    feedlyボタンをブログに設置して登録しやすいようにしてみる

    そういえばこのブログにはまだfeedlyボタンを設置していなかったので…

  6. ドットナビゲーションスタイル

    Web Information

    ドットナビゲーションスタイルの色んなパターンについて

    よくイメージスライダーの下部なんかに見かけるドットナビゲーション。通常…

最近の記事

  1. M360bt
  2. BQ-CASE/1

アーカイブ

PAGE TOP