スクロール値によって要素のサイズを拡大縮小させたい／CSS変数活用でうまくいったエピソード1

実務作業で、CSS変数を活用して実際にうまくいったエピソードを紹介してみたいと思います。
（実務で実際に使用したものではなく、ブログ用に再調整したものとなっております）

求められる結果

• 今回は例として、
  「背景色がグラデーションになっている要素が、スクロールにあわせてだんだん表示されなくなっていく」
  「500ほどスクロールすると要素がだんだん見えなくなっていく（演出技法のアイリスアウトのようなイメージです）」

上記を目指してやってみたいと思います。

やってみる

【スクロールイベントにあわせるためにGSAP ScrollTriggerを使用】

手っ取り早く実装するため、GSAP ScrollTriggerの力を借ります。
さらに、カクカクするのを滑らかにする必要があったので一緒にLenisの力も借ります。

【Lenisとは】

「慣性スクロール」を付与できる、JavaScriptのライブラリ。

Lenisの公式サイト：
https://www.lenis.dev/
Lenisのドキュメント（GitHub）：
https://github.com/darkroomengineering/lenis/blob/main/README.md

GSAPの公式サイト：https://gsap.com/
GSAPのライセンスについて：https://gsap.com/licensing/

GSAP ScrollTriggerとLenisを一緒に使う場合の導入方法は、公式サイトに記載されていますのでこちらを参考にして実装していきます。

【実装】

早速やってみます。
結論としてはこうなります。（更新する場合はRerunをクリックしてください）

• 「背景色がグラデーションになっている要素が、スクロールにあわせてだんだん表示されなくなっていく」
  →スクロール量にあわせて、CSS変数 --js-clip-path-scale の値を増減させることで再現しています。
  →CSS変数 --js-clip-path-scale の値を使って上下左右を削っている状態にしています。

• 「500ほどスクロールすると要素がだんだん見えなくなっていく（演出技法のアイリスアウトのようなイメージです）」
  →GSAP ScrollTriggerの end: "+=500" プロパティを設定しています。

よくある「こりごりだ〜エンド」みたいなものになりました。

【ポイント】

• --js-clip-path-scale: 45;

  この値を変えるだけで、スクロール後に最終的に残る部分の範囲を変更できます。
  例）50にすると全く何も無い状態になっていきます。

:root {
  /* 最終的に残る範囲　0で全表示、最大:50 */
  --js-clip-path-scale: 45;
}

当時はなにがうまくいったのか

当時、「アニメーションの指示が厳密ではなく、あとから調整が入るかもしれない」という状況で作業をしておりました。 なので、なるべく調整がしやすいようにしておきたいなと思いあれこれやっていたもののひとつとして、この方法を採用しました。

結果的にあまり調整は行わなかったのですが、〜かもしれない、という考えから試行錯誤できたのは自分としては良かったかなと思ったり思わなかったり。いやでも今後に生かせるかもしれないので...。

CSS変数でやる意味

CSS変数じゃなくても良くない？と、思われたかもしれませんが、 IDやclass名で制御する場合、お恥ずかしい事に状況によってはすぐ把握できないことがままあります。
ですがCSS変数で制御しておくと、検証ツールで確認した時などに「何かやってるな」とわりとすぐ気がつけるのです…9割これが理由です。
これで助かる命があるのです。

というのは少し冗談ですが、
「JavaScript側は動きだけ」「CSS側で見た目をコントロール」するように分けておくと、場合にもよりますがとても楽になります。コードもすっきりします。
CSS変数を変えるだけで調整が効くようになると、何かと助かるのです。

まとめ

スクロール量に合わせて要素に変化を加える仕様は面白いですけれども、やりすぎ注意な印象が強いですね…！
これは忘れないようにしたいなと思います。

CSS変数はできることが多くなってきましたので、勉強がてらいろいろ試してみたいと思っておりますので、また何か紹介できたらいいなと思っております。
最後まで読んでいただき、ありがとうございました。