可愛い！思わず使いたくなるSVGアニメーション
2018.12.25 Posted by Coding_team
こんにちは、ウェブラボ技術メモです。
今回は、最近可愛いなぁ〜と思ったSVGアニメーションの紹介をしたいと思います。
参考サイトはこちらです。
このWebサイトはフリーランスのデザイナーさんが運営しているcodropsというWebサイトの作品の一つです。
イラストも素敵ですが、主張しすぎないSVGを使ったアニメーションがいいですね。
私も早速使ってみました！ デモページはこちら
■実装方法
1. まずプラグインをこちらからダウンロードします。
2. 以下を適宜記述する。
|
1 2 3 |
<link rel="stylesheet" type="text/css" href="js/component.css"> <script src="js/snap.svg-min.js"></script> <script src="js/hovers.js"></script> |
3. ダウンロードしたindexやindex3を参考にHTMLを記述する。
自分の好きなpathを用意してもいいと思います！
4.cssに要素の色などを記述。
皆さんもWebサイトのちょっとしたユニークポイントとして取り入れてみてはいかがでしょうか？
関連記事こちらの記事も合わせてどうぞ。
