東京都新宿区のWeb制作会社 ウェブラボ株式会社

クリエイターブログ

可愛い!思わず使いたくなるSVGアニメーション

2018.12.25 Posted by

blog

こんにちは、ウェブラボ技術メモです。

今回は、最近可愛いなぁ〜と思ったSVGアニメーションの紹介をしたいと思います。

 

参考サイトはこちらです。

このWebサイトはフリーランスのデザイナーさんが運営しているcodropsというWebサイトの作品の一つです。

イラストも素敵ですが、主張しすぎないSVGを使ったアニメーションがいいですね。

私も早速使ってみました! デモページはこちら

 

■実装方法

1. まずプラグインをこちらからダウンロードします。

 

2. 以下を適宜記述する。

 

3. ダウンロードしたindexやindex3を参考にHTMLを記述する。

自分の好きなpathを用意してもいいと思います!

 

4.cssに要素の色などを記述。

 

皆さんもWebサイトのちょっとしたユニークポイントとして取り入れてみてはいかがでしょうか?

オリエンシートダウンロード

オリエンシートダウンロード

PAGETOP

お問い合わせContact

まずはお気軽にご相談ください。

Web制作・コンサルティング・システム開発に関するお問い合わせ・お見積もり依頼は、
電話・問い合わせフォームより受け付けております。(受付時間:平日9:30〜18:30)

〒160-0004 東京都新宿区四谷4丁目33-2
マーキュリースクエア4F

TEL:03-5366-3277 FAX:03-5366-3278