素敵なウェブサイト紹介

素敵なウェブサイト紹介

今週は、素敵だなと思ったウェブサイトを1つ紹介します。

Wash&Cafe|大阪・門真市にあるコインランドリー(ウォッシュ&カフェ)

アイコンに水色の◯を載せるだけでも、一工夫している感じが良いですよね。

それともう一つ、よく見るとKVの”wash&cafe”の文字と、serviceの中の01・02・03の文字の中に動く波が見えるのも素敵です。大きな動きだけでなく、こうした細かいあしらいだけでも、サイトの印象がぐっと変わると思うので、今後マネしたいなと思いました。

ちなみに、この波を動かすのは、

  • svgで波の画像を用意する
  • 波の画像をbackground-imageとして指定する
  • 波の上に載せる文字でクリッピングマスクをし、文字の塗りを透明にする
  • keyframeで波のアニメーションを設定する

これだけあればできます!

そんなに複雑な技術ではないので、ぜひマネしたいですね。

以上です。