今週は、素敵だなと思ったウェブサイトを1つ紹介します。
アイコンに水色の◯を載せるだけでも、一工夫している感じが良いですよね。
それともう一つ、よく見るとKVの”wash&cafe”の文字と、serviceの中の01・02・03の文字の中に動く波が見えるのも素敵です。大きな動きだけでなく、こうした細かいあしらいだけでも、サイトの印象がぐっと変わると思うので、今後マネしたいなと思いました。
ちなみに、この波を動かすのは、
- svgで波の画像を用意する
- 波の画像をbackground-imageとして指定する
- 波の上に載せる文字でクリッピングマスクをし、文字の塗りを透明にする
- keyframeで波のアニメーションを設定する
これだけあればできます！
そんなに複雑な技術ではないので、ぜひマネしたいですね。
以上です。
