はじめまして、WEBコーダーのばやしです。
今回は、弊社イロコトでWebサイト制作を担当させていただきました箱根の日帰り温泉「森の湯」の公式サイトで使用したアニメーションを紹介します。
目次
箱根の日帰り温泉「森の湯」
上記サイトで使用したもののうち、
・メインビジュアルにうっすらとかかる湯気のアニメーション
・右下のバナーの表示
についてサンプルコードを提示しつつ紹介していきます。
SVGとCSS filterを利用したアニメーションになります。メインビジュアルの写真の上に漂う湯気を再現することで、箱根温泉の雰囲気を感じていただきたいという目的があり実装しました。
Adobe Illustratorにて、湯気のベースとなるSVGを作成します。規則性が無いようなぐちゃぐちゃとした図形であればどのような形でも問題ありません。今回は重ね合わせて奥行きを表現するため、2つ作成しました。
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>
湯気を配置する親要素の設定を行います。
.steam-box {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
pointer-events: none;
z-index: 1;
}
湯気に適用するアニメーションを定義します。画面下からせり上がってくる湯気が形を変えながら拡散していくイメージで、filterやtransformを使用してゆらぎを表現します。
複数の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にてブラウザセッションが終了するまで表示しないようになっていますが、総合トップページのみ例外で閉じてもリロードで再度表示されます。(より一層クーポンページへ誘導するため)
常に表示させているとユーザーが煩わしく感じる可能性があるため、閉じるボタンも実装しています。
<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制作サービスをご提供することを心掛けております。お仕事のご相談をお考えのご担当者様がいらっしゃいましたら、お気軽に問い合わせフォームよりお問い合わせください。
ばやし
WEBコーダー。お絵かきと音ゲーと写真撮影(旅行)が趣味。 最近はAIに脳を破壊されています。