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

    Nexus7で英和辞書を簡単に呼び出して翻訳できるようにする環境構築

    Nexus7を使っていてちょっと不便なのが英文を読む時。iPhoneみ…

  2. Web Information

    かなり便利なCSSフレームワーク「960 Grid System」を使ってみた

    ちょっと前から気になっていたCSSフレームワーク「960 Grid S…

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

    Web Information

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

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

  4. 特定のCookieを削除

    Web Information

    Chromeで特定の(個別に)webサイトのCookieを削除するやり方

    Google Chromeのブラウザで特定のwebサイトだけのCook…

  5. URLをハイライト表示させるショートカットキー

    Web Information

    ChromeでURL欄にカーソルを合わせる(ハイライト表示)ショートカットキー

    最近覚えたChromeの役立つショートカットキーをご紹介します。URL…

  6. Google英語版でWeb検索

    Web Information

    Googleの英語版でWeb検索して検索結果を表示させるやり方

    Google の英語版でWeb検索をする必要があったのでその時のやり方…

最近の記事

  1. Waterlogue
  2. macOS Mojaveのダークモード
  3. Olli
  4. 単語帳メーカー(Flashcard Maker App)

Facebookページ

PAGE TOP