くまだどうも、くまだです。
CSSだけでスクロールに連動したアニメーションの実装メモ。
GSAPでいうスクラブアニメーションみたいな動きができます。
animation-timelineでアニメーション
コードは以下のとおりです。
<div class="boxWrap">
<div class="box"></div>
</div>body {
height: 100vh;
}
.boxWrap {
position: fixed;
inset: 0;
display: flex;
justify-content: center;
align-items: center;
}
.box {
width: 100px;
height: 100px;
background: red;
transform-origin: center;
animation: rotation linear;
animation-timeline: scroll();
}
@keyframes rotation {
from {
rotate: 0deg;
translate: -200px 0;
}
to {
rotate: 360deg;
translate: 200px 0;
}
}See the Pen animation-timeline by kuma0605 (@kuma0605) on CodePen.
スクロールに応じて、要素が左右に回転しながら移動するイメージ。
以下の部分でkeyframesでアニメーション設定。
@keyframes rotation {
from {
rotate: 0deg;
translate: -200px 0;
}
to {
rotate: 360deg;
translate: 200px 0;
}
}設定したアニメーションはanimationプロパティで発動。animation-timeline:scroll();も設定します。
.box {
width: 100px;
height: 100px;
background: red;
transform-origin: center;
/* 設定したアニメーション */
animation: rotation linear;
/* アニメーションタイムライン */
animation-timeline: scroll();
}scroll()はCSS関数でanimation-timelineプロパティに設定できます。
animation-timelineは一部のブラウザでは対応済です。
ここまで読んでくださりありがとうございました。