先日、革新的に作ったanimation-timelineの未対応ブラウザでも使えるライブラリですが、仕事でも使えるので、こっそり引き続き開発を進めていました。
前回のバージョンでは、画面全体のスクロール値に対して、エレメントのkeyframesを設定できる機能のみでしたが、今回は、view()機能に対応することができました。
すでにgithubも更新しているので、前回clone下人は、pullをしてお使いください。
そして、ホームページのスクロール値による、演出をしたいと考えている人は、是非この記事を参考にして、クオリティアップに繋げましょう。
改めてanimation-timelineの解説
前回のブログにも基本の解説を書いているので参照してください。
https://blog.myntinc.com/2023/09/cssanimation-timelinegooglechrome.html
前回は、cssの解説をあまりしていなかったので、今回はcss解説をちゃんと行っておきたいと思います。
css解説
基本的にスクロールをするwebページが対象になります。
スクロールの値を、画面上部（スクロール値0%)と、画面下部（スクロール値100%）をそれぞれのスクロール値に対して、@keyframesの%（または、from~to）の値に置き換えて、スタイルシートをrangeに応じた値で表示してくれるようになります。
スタイルシートの書き方は、次のようにするだけで値反映ができます。
.target{
position:flex;
top:0;
left:0;
display:block;
border:1px solid black;
width:100px;
height:100px;
}
.target::before{
content:'';
display:block;
width:100%;
height:100%;
background-color:blue;
animation-name: scroll-anim;
animation-timeline:scroll();
}
@keyframes scroll-anim{
0%{
height:0%;
}
100%{
height:100%;
}
}
これだけで、スクロール値が見た目でわかる表示が作れます。
view()モードの解説
前回は、"animation-timeline:scroll();"という、scroll()機能のみでツール開発をしただけだったのですが、画面に表示されていないところでアニメーションが実行されても、わからないですよね？
その為、この機能は、画面に表示された時だけの割合いで表示することもできます。
それが、"animation-timeline:view();"という設定です。
これを利用すれば、画面にスクロールして画面に入ってきた時を0%、スクロールで画面を通り過ぎた時を100%として、keyframesの処理を実行してくれるようになります。
ようするに、画面の表示エリアの割合いでのパーセンテージになるわけですね。
デモ
わかりにくいと思うので、下記のデモを見てください。
※今回は、GoogleChrome以外のブラウザでも、正常に動くようにしてみました。
Githubリンク
https://github.com/yugeta/animation_timeline
あとがき
この機能を使う時に、animation-rangeというプロパティを使うと、画面の中の割合いを設定できるのですが、この機能を使うと非常にややこしくなるので、割合いの調整は、keyframesの%で設定した方がはるかにらくなので、今回のバージョンでは、animation-range機能は機能しないようになっています。
なので、もしGoogleChromeでは、ネイティブで動作してしまうので、オススメは、keyframesで調整する方が良いことを言っておきます。（別に使ってはいけないわけではないんですが、このツールを使うとブラウザ間で見え方が変わってしまいます。）
あと、今後の予定として、縦スクロールをしている途中で、横スクロールに切り替わるようなwebサイトを見たことがある人もいるかと思いますが、あれも、この機能を使ってcssのみで使うことが可能なのですが、GoogleChrome以外では、動作しません。
この機能にも対応させて、webページコーディングをできる限り楽にできるようにして行きたいと思っています。
もし、機能追加要望などあれば、コメントまたは、お問い合わせで、お送りくだされ。
