どんなものが出来るのか
このgif画像を参考にしてください。
「あの動き」では困るので「カバーアニメーション」と命名します。正式名称があったら誰か教えてください。
基本の形の作り方
アニメーションは広く普及しているanime.jsで記述します。
環境
CSSリセットとしてress、アニメーションはanime.jsで記述していきます。
お使いの環境に合わせて適宜変更していってください。
コーディング
HTML
<div class="wrap">
<div class="cover"></div>
<p>ANIMATION</p>
</div>
CSS
.wrap {
position: relative;
padding: 8px;
}
.wrap > .cover {
position: absolute;
z-index: 1;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: #03a9f4;
}
.wrap > p {
position: relative;
z-index: 0;
font-size: 24px;
font-family: "Montserrat";
letter-spacing: 2px;
color: #1f1f1f;
}
JS
// 要素の取得
var wrap = document.getElementsByClassName("wrap")[0];
var cover = wrap.getElementsByClassName("cover")[0];
var text = wrap.getElementsByTagName("p")[0];
// アニメーション
var timeline = anime.timeline();
timeline
.add({
targets: cover,
duration: 500,
easing: "easeInExpo",
begin: () => {
cover.style.transformOrigin = "left";
text.style.visibility = "hidden";
},
scaleX: [0, 1]
})
.add({
targets: cover,
duration: 500,
easing: "easeOutExpo",
begin: () => {
cover.style.transformOrigin = "right";
text.style.visibility = "visible";
},
scaleX: [1, 0]
});
何をやっているか
アニメーション開始時点 (1回目のbegin関数)
文字側のvisibilityをhiddenに設定する。
CSSプロパティのtransform-originをleftに設定する。
カバーを拡大する (scaleX: [0, 1])
scaleXを0から1へアニメーションさせる。
カバーの拡大が完了 (2回目のbegin関数)
文字側のvisibilityをvisibleに設定する。
CSSプロパティのtransform-originをrightに設定する。
カバーを縮小する (scaleX: [1, 0])
scaleXを1から0へアニメーションさせる。
基本的にはやっている事はこれだけです。
コツ
イージングは拡大するときにはeaseIn*系、縮小するときにはeaseOut*系を使うと動きがスムーズに見えて見栄えが良くなります。
応用
その1
カバーを2個にします。
HTML
cover要素はp要素より前に置かないとCSS側のnth-type-of(n)で上手くいかないので注意してください。
<div class="wrap">
<div class="cover"></div>
<div class="cover"></div>
<p>ANIMATION</p>
</div>
CSS
基本のCSSを少し改変します。
.wrap > .cover:nth-of-type(1) {
background-color: #03a9f4;
z-index: 2;
}
.wrap > .cover:nth-of-type(2) {
background-color: #0277bd;
z-index: 1;
}
JS
カバー毎にdurationとdelayを少しだけずらします。
// 要素の取得
var wrap = adv_1.getElementsByClassName("wrap")[0];
var cover1 = wrap.getElementsByClassName("cover")[0];
var cover2 = wrap.getElementsByClassName("cover")[1];
var text = wrap.getElementsByTagName("p")[0];
// アニメーション
var timeline = anime.timeline();
timeline
.add({
targets: [cover1, cover2],
duration: (target, index) => 500 - index * 100,
easing: "easeInExpo",
begin: () => {
cover1.style.transformOrigin = "left";
cover2.style.transformOrigin = "left";
text.style.visibility = "hidden";
},
scaleX: [0, 1]
})
.add({
targets: [cover1, cover2],
duration: 500,
delay: (target, index) => index * 100,
easing: "easeOutExpo",
begin: () => {
cover1.style.transformOrigin = "right";
cover2.style.transformOrigin = "right";
text.style.visibility = "visible";
},
scaleX: [1, 0]
});
その2
応用 その1を簡略化したものです。イージングを各要素ごとに違うものを適用しています。
HTML、CSSは応用1のものと同じです。
JS
timeline
.add({
targets: [cover1, cover2],
duration: 500,
easing: (target, index) => `easeIn${["Expo", "Cubic"][index]}`,
scaleX: [0, 1],
begin: () => {
cover1.style.transformOrigin = "left";
cover2.style.transformOrigin = "left";
text.style.visibility = "hidden";
}
})
.add({
targets: [cover1, cover2],
duration: 500,
easing: (target, index) => `easeOut${["Expo", "Cubic"][index]}`,
scaleX: [1, 0],
begin: () => {
cover1.style.transformOrigin = "right";
cover2.style.transformOrigin = "right";
text.style.visibility = "visible";
}
});
最後
間違ってたらコメント欄でご指摘ください。