株式会社イロコト株式会社イロコト

Blogイロコトのブログ

  1. Home
  2. Blog
  3. 温泉の湯気をSVGとCSS filterでアニメーションで実装してみた

温泉の湯気をSVGとCSS filterでアニメーションで実装してみた

2020.04.30
2020.05.11
  • コーディング

はじめまして、WEBコーダーのばやしです。

 

今回は、弊社イロコトでWebサイト制作を担当させていただきました箱根の日帰り温泉「森の湯」の公式サイトで使用したアニメーションを紹介します。

 

完成形

箱根の日帰り温泉「森の湯」

https://www.morino-yu.com/

 

上記サイトで使用したもののうち、

・メインビジュアルにうっすらとかかる湯気のアニメーション

・右下のバナーの表示

についてサンプルコードを提示しつつ紹介していきます。

 

 

湯気のアニメーション

SVGCSS filterを利用したアニメーションになります。メインビジュアルの写真の上に漂う湯気を再現することで、箱根温泉の雰囲気を感じていただきたいという目的があり実装しました。

 

湯気を形作るSVGの作成

Adobe Illustratorにて、湯気のベースとなるSVGを作成します。規則性が無いようなぐちゃぐちゃとした図形であればどのような形でも問題ありません。今回は重ね合わせて奥行きを表現するため、2つ作成しました。

 

 

SVGを読み込む

HTML側でSVGを読み込みます。本番サイトの方では、幅をもたせるために湯気SVGその2を少し変形させたものを追加で配置しています。

※増やしすぎると処理が重くなるので、程々にすると良いと思います。

<div class="steam-box">
  <p class="steam-01">
    <img src="/assets/images/common/index/steam_01.svg" alt="">
  </p>
  <p class="steam-02">
    <img src="/assets/images/common/index/steam_02.svg" alt="">
  </p>
</div>

 

CSSで基本設定を行う

湯気を配置する親要素の設定を行います。

.steam-box {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}

 

アニメーションを定義する

湯気に適用するアニメーションを定義します。画面下からせり上がってくる湯気が形を変えながら拡散していくイメージで、filtertransformを使用してゆらぎを表現します。

 

複数のSVGを表示する場合、個別に1つずつアニメーションを定義しばらつきを持たせた方がよりリアルさが出ます。

@keyframes steam-move-01 {
  0% {
    filter: blur(12px);
    transform: scale(0.8, 0.8) rotateY(0deg);
    opacity: 0;
    bottom: -1300px;
  }
  6% {
    opacity: 0.15;
  }
  33% {
    transform: scale(0.9, 1.1) rotateY(30deg);
    opacity: 0.3;
  }
  66% {
    transform: scaleY(1, 0.8) rotateY(4deg);
  }
  100% {
    filter: blur(18px);
    transform: scaleY(1.5, 1.3) rotateY(50deg);
    opacity: 0;
    bottom: 0;
  }
}

 

湯気にアニメーションを適用する

湯気の表示位置とアニメーションを適用し完成です。途切れることが無いように、各SVGが時間差(animation-delay)で昇っていくように設定すると良いと思います。

.steam-01 {
  left: calc(50% - 350px);
  -webkit-animation: steam-move-01 20s infinite linear;
  animation: steam-move-01 20s infinite linear;
}

今回のサイトでは以下画像のように湯気を配置しました。

 

 

 

バナーの表示アニメーション

箱根の日帰り温泉「森の湯」では、LINEクーポンがかなりお得ということで、ユーザーの操作に合わせて表示されるクーポンに誘導するバナーを設置しました。

 

アニメーション自体はごくシンプルなもので、ユーザーのスクロールを検知したらanimatedクラスを追加し、transitionで右からせり出します。

 

一度閉じたらcookieにてブラウザセッションが終了するまで表示しないようになっていますが、総合トップページのみ例外で閉じてもリロードで再度表示されます。(より一層クーポンページへ誘導するため)

 

 

HTMLにてバナー配置

常に表示させているとユーザーが煩わしく感じる可能性があるため、閉じるボタンも実装しています。

<div class="sw-Coupon">
  <button><span></span></button>
  <a href="/coupon/">
    <img src="/assets/images/pc/common/bnr_coupon.png"/>
  </a>
</div>

アニメーションの設定

曖昧で感覚的ではありますが、存在がわかりやすい速度でアニメーションするよう設定しました。

最初はopacityでフェードインするように設定していましたが、動きがなく存在感が薄かったのでせり出してくるアニメーションになりました。

.sw-Coupon {
  position: fixed;
  bottom: 43px;
  right: 0;
  transform: translateX(506px);
  transition: transform 1s;
}
.sw-Coupon.animated {
  transform: translateX(0);
}

アニメーションタイミングの設定

ユーザーがスクロールし始めたタイミングで表示されるように設定しました。

読み込み終了時よりも、ユーザーが「このサイトを見てみよう」と考えスクロールし始めたタイミングの方が注意を引けると考えたためです。

 

サイト全体を通してjQueryを使用しています。

const scrollAnime = () => {
  let trg = 0;
  $(window).on('scroll', function() {
    if (trg == 2) {
      $('.sw-Coupon').addClass("animated")
    } else {
      trg += 1;
    }
  });
};

 

まとめ

2つとも複雑なアニメーションというわけではありませんが、サイト内容に即したちょっとしたアニメーションを加えるだけで見栄えが大きく変わることを実感しました。取り上げた湯気のアニメーションは、温泉に限らず様々なエンタメサイトなどでも活用できそうですね。

 

ちなみに私はまだ「森の湯」には行けていないのですが、他社員から非常に良い温泉だとオススメされていますので、行ける機会を作りたいと思っています。

 

最後に

弊社イロコトではクライアント様からのご依頼に応じて最適なWeb制作サービスをご提供することを心掛けております。お仕事のご相談をお考えのご担当者様がいらっしゃいましたら、お気軽に問い合わせフォームよりお問い合わせください。

 

→ お問い合わせフォームへ

 

Contact

案件のご相談や、弊社についてのご質問など、
お気軽にご連絡くださいませ。

お問い合わせ