vier

Let's be more curious.

ブログのヘッダーをSVGとCSSでモーフィングする方法

SVGとCSSでモーフィングする方法

はじめに

ブログをヘッダーのデザインを久しぶりに見直してみました。

今回取り入れたのは、ベーシックなSVGモーフィングをCSSのアニメーションで動かしてみました。

なぜSVGモーフィングを使うのか

理由はシンプルで単に目を引きたいからです。😅

ヘッダーに動きがあると何となくカッコよく見えるので、イケてるサイトだと勘違いしてくれることを期待しているからです。

しかし、JavaScriptで動かすとページスピードに影響が出るので、あまり凝ったモーフィングは避けました。


実は、変更前のヘッダーも簡単な流体シェイプを実装してました。

ヘッダー


使用したのはBGJarのサイトで公開されいるAnimated Shapeです。

Free svg background generator

Free svg background generator

Free svg background generator for your websites, blogs and app.


しかし動きがスローすぎたので、インパクトは今一つでした。

もっと派手な動きがあるものを探していたら、いつも参考にさせて頂いているKachibitoさんが波のモーフィングを公開されてました。

SVGとanimationで滑らかな動きの波っぽいやつ

SVGとanimationで滑らかな動きの波っぽいやつ

Result See the Pen Simple CSS Waves | Mobile & Full width by kachibito (@kachibito) on CodePen.ヒーローイメージに目が疲れない程度のア


SVGモーフィング

Kachibitoさんのモーフィングはシンプルで美しいと感じたので、さっそくブログのヘッダーに実装して見ました。

ダークモード対応でfillの使い方を変更してますが、Webサイトに美しい波を出現させることが出来ました。

Kachibitoさん、ありがとうございます。

ブログに実装したコードを公開するので、興味がある方は参考にご覧下さい。


HTMLのコード
<div class="inner-header">
	<div class="header-top"></div>
	<div>
		<svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
			viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
<defs>
<path id="gentle-waves" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" />
</defs>
<g class="parallax">
<use xlink:href="#gentle-waves" x="48" y="0" class="wave-1" />
<use xlink:href="#gentle-waves" x="48" y="2.3" class="wave-2" />
<use xlink:href="#gentle-waves" x="48" y="4.7" class="wave-3" />
<use xlink:href="#gentle-waves" x="48" y="7" class="wave-4" />
</g>
</svg>
	</div>
</div>


CSSのコード
/* wave css */

.inner-header {
    position: relative;
    height: 28vh;
    background: var(--bs-weve-bgcolor);
    width: 100%;
    margin: 0;
    padding: 0;
}

.header-top {
    position: relative;
    height: 22vh;
}

.waves {
    position: relative;
    width: 100%;
    height: 6vh;
    /*margin-bottom: -7px;*/
}

:root {
    --bs-weve-bg: 251, 253, 255;
    --bs-weve-bgcolor: linear-gradient(0deg, #005ed2, #0062d5, #006ddd, #007ce7, #008ef1, #00a1f8, #00b4fd, #00c6ff, #00d6ff, #00e2ff, #00eaff, #00edff);
}

.dark-mode {
    --bs-weve-bg: 31, 31, 31;
    --bs-weve-bgcolor: linear-gradient(180deg, #030036, #02003b, #000248, #000c5b, #001d72, #00378d, #0059a8, #0082c3, #00acda, #00d3ed, #00eefa, #00f9ff);
}

.wave-1 {
    fill: rgba(var(--bs-weve-bg), 0.2);
}

.wave-2 {
    fill: rgba(var(--bs-weve-bg), 0.5);
}

.wave-3 {
    fill: rgba(var(--bs-weve-bg), 0.7);
}

.wave-4 {
    fill: rgba(var(--bs-weve-bg), 1);
}

.parallax>use {
    animation: move-forever 25s cubic-bezier(.55, .5, .45, .5) infinite;
}

.parallax>use:nth-child(1) {
    animation-delay: -5s;
    animation-duration: 13.5s;
}

.parallax>use:nth-child(2) {
    animation-delay: -4s;
    animation-duration: 11s;
}

.parallax>use:nth-child(3) {
    animation-delay: -3s;
    animation-duration: 8.5s;
}

.parallax>use:nth-child(4) {
    animation-delay: -2s;
    animation-duration: 6s;
}

@keyframes move-forever {
    0% {
        transform: translate3d(-90px, 0, 0);
    }

    100% {
        transform: translate3d(85px, 0, 0);
    }
}


まとめ

SVGとCSSのアニメーションで美しい波のモーフィングを出すことが出来ました。コードも短いのでCPUの負荷も少なく、ページスピードへの影響もありませんでした。

今回背景画像はシンプルにグラデーションを設定しましたが、写真を表示すると、また変わった演出効果が出ると思います。

皆さんもヘッダーのデザインを変更し、自分好みのブログを変えてみては如何でしょうか。

気軽に足跡残してね!

この記事が「気になった・参考になった」と感じた方は、リアクションボタンか、ツイッターで♡いいねを押して、足跡を残して頂けると嬉しいです。


それでは今回の記事はこれでおしまい。

Next Post Previous Post
No Comment
Please Enter Comments in Light mode
comment url