「株式会社リブセンス」様のFVで使われているアニメーションの分析
▼分析対象
▼分析結果
- 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://developer.mozilla.org/ja/docs/Web/CSS/transform-function/translate3d()