トップページ > ブログ > 【SVGアニメーション】グラデーションで色が動く画像を作ってみました◎

BLOG

ブログ

UPDATE:2019.10.17

CATEGORY

【SVGアニメーション】グラデーションで色が動く画像を作ってみました◎

さやさんです。

私のブログ担当ジャンルが『テクニカルコーダー』とのことで、
毎回微妙に専門的? なお話の記事になってしまうのですが、
コーダーの仕事をなるべく難しくなく、かつ楽しく伝えられるように頑張りますね。

さて、今回のテーマは『SVGアニメーション』です。
以前のブログにも書きましたが、最近SVGアニメーションにハマっている私です。
SVGアニメーションについてはこちら

ホームページを可愛くおしゃれに彩るアニメーション。
その表現方法は色々とありますが、
元SEな私は裏で色々動かすためのコードを書いたりできるSVGアニメーションが
プログラミングっぽくて楽しいと感じる……の、かも?

今回はSVG画像に動くグラデーション色を指定してできる
グラデーションで色が動くちょっとおしゃれな画像の表現を紹介したいと思います。

そんなわけで、
流れるグラデーション色のSVG画像はこちら↓

See the Pen zYYBVKo by sasayama (@sasayama)
on CodePen.

Array ハロウィンっぽい雰囲気と色にしたかったのですが、
すごい色合いになってしまいました……。
いつも素敵な配色でデザインを仕上げるデザイナーさん、尊敬します。

★ちょこっと解説
インラインSVGにcssでグラデーション色を指定しています。
SVGには通常のグラデーションのプロパティ(linear-gradient)が使えないのですが、
代わりにlinearGradientタグというのがあり、そのタグを利用することでグラデーションを表現できます。
linearGradientでのグラデーションの指定の仕方はタグに直接記述するなどの方法もあるのですが、
今回はcssにグラデーションのアニメーションを記述する方法でコードを書きました。
動くグラデーションのアニメーションが指定されたlinearGradientをSVGのpathに指定することで、
pathにアニメーションが適用されます。

配色はすごいことになってしまいましたが、
グラデーションが動くだけでとてもおしゃれに見えると思いませんか?

アニメーションを作るのは決して簡単なことではありません。
でも、このようなちょっとした表現をコーディングで加えるとより素敵なホームページになるので、
色々と表現を学んでいきたいですね。

Happiness in Design

シアワセをデザインする会社

営業ゼロで年間600件以上
お問い合わせをいただいている
ノウハウを惜しみなく。

アプリコットデザインには創業当初から営業マンはいません。
創業当初からWEBを活用することに重点を置いて、これまで試行錯誤してきました。その結果、年間600件以上の問い合わせををこのホームページから得ています。ホームページという集客ツールを提供している私たち自身が、自社のホームページで集客できないのでは、お客様に自信を持ってオススメすることはできません。自社の実験から「WEBを活用して集客するためのノウハウを蓄積」した上で、誰よりもホームページの素晴らしさを知り、自信をもってお客様にご提供していきたいと考えます。

VIEW MORE

CONTACT

お問い合わせ・ご相談は
お気軽にどうぞ。

tel.0120-622835

営業時間/10:00〜18:00 
定休日/土日祝日

プロジェクト

それぞれの
らしさ溢れる日常を。

カフェ、トリミングサロン、ネイルサロン、スクール「tone village(トーンビレッジ)」

カフェ、トリミングサロン、ネイルサロン、スクール「tone village(トーンビレッジ)」

カフェ/ドッグサロン/
ネイルサロン/スクール

tone village

We're open.

採用情報

recruit info

豊かで彩りのある社会をつくる!

私たちは仕事を通して、一人でも多くの人が未来に対する希望を描けるような、そんなワクワクする社会をつくっていきたいと思っています。

VIEW MORE