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

Instafeed.jsWebサイト内にInstagramの画像を表示できる「Instafeed.js」前のページ

Bywordでフォントサイズを変更(拡大・縮小)する設定方法次のページ

関連記事

  1. YouTube動画をループ再生する方法

    Web Information

    YouTube動画をカンタンにループ再生(リピート)する方法

    YouTubeでお気に入りの動画などを見ているときに、ループ(リピート…

  2. Web Information

    Google Chromeで今見ているページのツイート数を知ることができる拡張機能「Twitterつ…

    何気に便利じゃないですかね。Google Chromeで今見ているペー…

  3. Palettab
  4. Web Information

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

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

  5. Web Information

    iPhoneでストップウォッチを使うにはデフォルトアプリ「時計」が便利

    iPhoneでストップウォッチを使うにはデフォルトで入っているアプリ「…

  6. iPhoneのスクリーンショットを片手で撮る

    Web Information

    iPhoneのスクリーンショットを片手で撮る方法(AssistiveTouch活用)

    iPhoneのスクリーンショットを片手で撮りたいと思う時ってありますよ…

最近の記事

  1. WiMAX
  2. 甘柿
  3. 冬用のふとん
PAGE TOP