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

2022/09/19 2022/02/13

はじめに

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

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

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

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

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

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

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

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

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

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

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の負荷も少なく、ページスピードへの影響もありませんでした。

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

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

気軽に足跡残してね！

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

ツイッターで♡いいねする

https://t.co/cqkYXf5911

ブログのヘッダーを波のモーフィングに変えたので、備忘録で記事にまとめてみました。

ヘッダーをいじる時の参考にして見て下さい。#Blogger #SVG #CSS #HTML #Morphing
— heavy-peat (@AfterWork_Lab) February 13, 2022