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. iPhoneのテザリングをBluetoothでMacと接続

    Web Information

    iPhoneのテザリングをBluetoothでMacと接続する方法

    先日、ちょっとテザリングをしなきゃいけない状況になったのでその時のやり…

  2. LINEで送るボタンの設置方法

    Web Information

    LINEで送るボタンの設置方法について

    LINEを使う人が増えてきたのでLINEで送るボタンを設置してみました…

  3. FeedlyのChrome拡張機能

    Web Information

    Feedlyに簡単にアクセスできるChrome拡張機能

    前はFeedlyからPocketに送っていたんですが、ここ最近はFee…

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

    Web Information

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

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

  5. Macでcommand + Zを元に戻す

    Web Information

    Macでcommand + Zで戻ったものを再度元に戻すショートカットキー

    何気にこれは覚えておくべきだなーと思ったので、メモがてらご紹介します。…

最近の記事

  1. レンズペン3 ミニプロとレンズペン ELITE マイクロプロ
  2. カメラマングローブ Grip Hot Shot III
  3. 包(つつむ)巾着ポーチ
  4. KMC-80BK

Instagram始めました

Facebookページ

PAGE TOP