Scroll-driven Animationsとは
Scroll-driven Animationsは、Chrome v115から使えるCSSだけで、スクロールと連動したアニメーションを作成できる機能です。
例えば、ある要素のスケールをスクロールに応じて0から1までアニメーションさせる場合、以下のようなコードになります。
<div class="box"></div>
body {
height: 200vh;
}
@keyframes progress {
from {
scale: 0;
}
to {
scale: 1;
}
}
.box {
position: fixed;
width: 100px;
height: 100px;
background: navy;
animation: progress linear;
animation-timeline: scroll();
}
Scroll-driven Animations Sample
最後までスクロールしたらトップへボタンを表示する
日本のWebサイトでは、Webページの右下にページの最上部へ戻るための「トップへボタン」を配置することがあります。
このボタンは最初から表示させていると邪魔になるため、最後までスクロールしたらJavaScriptで「トップへボタン」を表示する処理を追加することが多いです。しかし、Scroll-driven Animationsを使用すれば、同じ処理をJavaScriptなしで実装できます。
やり方はスクロールが特定のパーセンテージの位置まで行われたら、@keyframesで表示されるプロパティと値を指定するだけです。
bottomプロパティで作成する場合は以下のようなコードになります。
@keyframes progress {
0% {
bottom: -120px;
}
90% {
bottom: -120px;
}
91% {
bottom: 0;
}
98% {
bottom: 20px;
}
100% {
bottom: 20px;
}
}
.gotoTop {
display: grid;
place-items: center;
position: fixed;
right: 20px;
bottom: -120px;
width: 100px;
height: 100px;
border-radius: 50%;
background: navy;
color: white;
text-decoration: none;
animation: progress linear;
animation-timeline: scroll();
transition: bottom 1s ease;
}
最後までスクロールした際に「トップへ」ボタンを表示させるサンプル
CSSだけで作成すると、処理が軽くなり保守性も向上するため、Scroll-driven AnimationsがChrome以外のブラウザでも使用可能になった際には、JavaScriptではなくCSSで書くようにすると良いでしょう。
