ちょっとしたあしらいが可愛い！WEBサイト紹介

2019年12月23日2024年3月6日

今回はちょっとしたあしらいが可愛いWEBサイトとその方法についてご紹介します。

参考ウェブサイト紹介

Wash&Cafe

こちらのサイトは、全体を通して大きな動きはあまりないのですが、

タイトルの”Wash&Cafe”の中と、

“service”の中の01/02/03…の番号見出しの中にゆるーく波が見えますでしょうか!!

要素を大きく動かすだけでなく、このように見出しなどほんの一部分だけに工夫をするだけでも「細部にまでこだわったデザインだな..」と感じさせられます。

そこで今回は、テキストの後ろで動く波はどのように動かしているのかを簡単に紹介したいと思います。

やり方

波の画像をSVG形式で1枚用意する。(Illustrator)
Key-frameでアニメーションを設定。(CSS)
background-imageに波のSVG画像を読み込み、入れたいテキストでクリッピングマスクをかける(CSS)

ザックリ書きました。

具体的には、

2. Key-frameでアニメーションを設定。(CSS)

@-webkit-keyframes textWave {
 0% {
 background-position:0 260px
}
 to {
 background-position:-150px 260px
}
}
 @keyframes textWave {
 0% {
 background-position:0 260px
}
 to {
 background-position:-150px 260px
	 }
}

3. Key-frameでアニメーションを設定。(CSS)

.p-index .p-service__number span {
	font-size: 100px;
	font-family: 'Lilita One', cursive;
	line-height: 5;
	letter-spacing: .6rem;
       display: inline-block;
       background: #fff url(../img/wave_mask.svg) repeat-x; /*波の画像svg*/
       background-clip: text;
       -webkit-background-clip: text; /*テキストの形でクリッピングする(テキスト=SUMMER)*/
       -webkit-text-fill-color: transparent; /*テキストの塗りを透明にする→背景にしいた波の画像が見える*/
       background-position: 0 32px; /*波の画像の位置*/
       background-size: 150px; /*波の画像のサイズ*/
       -webkit-animation: textWave 4.2s infinite linear; /*keyframeで設定した波の動きを指定する*/
       animation: textWave 4.2s infinite linear; /*keyframeで設定した波の動きを指定する*/
}

ちなみにHTMLはこちらです。

<div class="p-index">
　<div class="p-service__number">
	<span>SUMMER</span>
　</div>
</div>

*<body>の中だけ書きました。

もし、デザインにあと一工夫加えたい！という場合はぜひ検討してみてください。

URLをコピーしました！

ちょっとしたあしらいが可愛い！WEBサイト紹介

参考ウェブサイト紹介

やり方

関連記事