「株式会社リブセンス」様のFVで使われているアニメーションの分析

▼分析対象

https://www.livesense.co.jp/

▼分析結果

  • FVのアニメーションはJavaScriptではなく、CSSで設定している
  • すべて「top.css」で定義。
  • 「top-mainvisual-video」が左にスライドするアニメーションは下記のコードで定義されている。
.top.top-mainvisual-video {
	background-color: #538B9D;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	width: 100vw;
	height: 100vh;
	min-height: 640px;
	overflow: hidden;
	position: absolute;
	left: 0;
	right: auto;
	z-index: 10;
	-webkit-transition: width 1s cubic-bezier(0.6, 0.04, 0.35, 1) 3s;
	transition: width 1s cubic-bezier(0.6, 0.04, 0.35, 1) 3s;
}
  • widthに対してtransitionを定義。
  • 「cubic-bezier」=ベジェ曲線のプロパティでイージングを行っている(※デモ:https://cubic-bezier.com/#.17,.67,.83,.67)。
  • 「プロパティ名 | 時間 | イージング関数 | 遅延」の意味。
  • htmlタグに「is-loaded」クラスを付与し、幅50vwを指定。
<html lang="ja" class="js top top-html chrome is-loaded is-oepning-end">
.is-loaded.top .top-mainvisual-video {
	width: 50vw;
}
  • 「is-loaded」はJavaScriptで付与。
function commonLoadEvent() {
	setTimeout(function () {
		if (c.addClass("is-loaded"), new a, c.hasClass("top")) setTimeout(function () {
			c.addClass("is-oepning-end")
		}, 5e3);
		else {
			var e = $(".l-lower-index-head");
			e.length > 0 && (e.find(".l-lower-index-illustration img").addClass("is-in"), e.find(".l-lower-index-title").addClass("is-in"))
		}
	}, 300), setTimeout(function () {
		c.removeClass("is-not-scrollable")
	}, 3500), $("html").hasClass("ie")
}
  • 下記のコードで「top-mainvisual-copy」を下からフェードインさせている。
.top.top-mainvisual-copy .top-mainvisual-copy-inner {
	position: absolute;
	width: 100%;
	height: 100%;
	-webkit-transform: translate3d(0, 60px, 0);
	transform: translate3d(0, 60px, 0);
	-webkit-transition: -webkit-transform 1s cubic-bezier(0.6, 0.04, 0.35, 1) 1s;
	transition: -webkit-transform 1s cubic-bezier(0.6, 0.04, 0.35, 1) 1s;
	transition: transform 1s cubic-bezier(0.6, 0.04, 0.35, 1) 1s;
	transition: transform 1s cubic-bezier(0.6, 0.04, 0.35, 1) 1s, -webkit-transform 1s cubic-bezier(0.6, 0.04, 0.35, 1) 1s;
}
  • translate3d() は CSS の関数で、要素を三次元空間内で再配置する。
  • y軸方向に60px動かしている。
  • 下記2箇所でページ読み込み後の位置指定。
.is-loaded.top .top-mainvisual-copy .top-mainvisual-copy-inner {
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}

.is-loaded.top .top-mainvisual-copy .top-mainvisual-copy-inner img {
	opacity: 1;
	-webkit-transform: translate3d(-50%, -50%, 0);
	transform: translate3d(-50%, -50%, 0);
}

▼参考

https://developer.mozilla.org/ja/docs/Web/CSS/easing-function

https://developer.mozilla.org/ja/docs/Web/CSS/transition

https://cubic-bezier.com/

https://developer.mozilla.org/ja/docs/Web/CSS/transform-function/translate3d()