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

    Gmailのサイドバーメニューに迷惑メールのラベルを表示させる方法

    ちょっと備忘録です。Gmailで例えば迷惑メールに入ってほしくないメー…

  3. Web Information

    iPhoneとMacをUSBテザリングで接続するやり方

    前回iPhoneとMacをBluetoothテザリングするやり方を記事…

  4. iPad Airのテンプレート素材(PSD)

    Web Information

    デザインやモックアップに役立ちそうなiPad Airのテンプレート素材(PSD)

    iPad Airのテンプレート素材(PSD)がとてもよかったのでメモが…

最近の記事

  1. レトロスペクティブ V2.0
  2. YAECA ワイドテーパードデニム 10-13WW
  3. ADR-3ML39シリーズ
  4. キュレル モイスチャーバーム

アーカイブ

PAGE TOP