スクロールに合わせたアニメーションはWEB制作では最も使われる技術といっても過言ではないと思います。
有名どころではGSAPのScroll Triggerなどを利用してスクロールアニメーションを書くことも多いと思いますが、意外と癖があり、スクロール位置がズレたりと修正作業に時間がかかることも多いです。
そこで今回は外部ツールを使わず、スクロールに合わせてアニメーション用のclass付けをするJavascriptを紹介したいと思います。
もちろんすべてコピペで使えるのでご安心を。
スクロールが発火位置を通過するたび、アニメーションを作動させたい場合
今回は発火位置をスクロールで経過した場合、animationというクラスにactiveというクラスを追加する設定でコードを書いています。
// スクロールトリガー
window.addEventListener("load", () => {
// boxをすべて取得
const boxes = document.querySelectorAll(".animation");
// scrollイベントをセット
window.addEventListener("scroll", showBoxes);
// ロードのタイミングで一度発火
showBoxes();
function showBoxes() {
// 発火位置
const triggerBottom = (window.innerHeight * .75);
boxes.forEach((box) => {
// boxの頭部分の座標を取得
const boxTop = box.getBoundingClientRect().top;
// boxの頭部分が発火位置を超えたら
if (boxTop < triggerBottom) { box.classList.add("active"); } else { box.classList.remove("active"); } }); } }); コード解説
上記のコードですと、発火位置を超えたときに追加するclassをまた削除する設定になっているので、スクロールで発火位置を超えるたびにアニメーションが作動するようになっています。
また、スクロール前に発火位置を超えている場合はスクロールしなくてもローディングが終了した時点でclass付けがされるようになっています。
スクロールアニメーションの発火位置を変えたい場合は
// 発火位置
const triggerBottom = (window.innerHeight * .75);の(window.innerHeight * .75);の数値を変更してください。
この数値はブラウザーの表示位置の上から何パーセントの位置で発火させるか指定するものです。
例えば、表示位置のちょうど半分の位置を発火位置にしたい場合は
// 発火位置
const triggerBottom = (window.innerHeight * .50);に変更してください。
スクロールで発火位置を超えた一度のみアニメーションを作動させたい場合
// スクロールトリガー window.addEventListener("load", () => {
// boxをすべて取得
const boxes = document.querySelectorAll(".animation");
// scrollイベントをセット
window.addEventListener("scroll", showBoxes);
// ロードのタイミングで一度発火
showBoxes();
function showBoxes() {
// 発火位置
const triggerBottom = (window.innerHeight * .75);
boxes.forEach((box) => {
// boxの頭部分の座標を取得
const boxTop = box.getBoundingClientRect().top;
// boxの頭部分が発火位置を超えたら
if (boxTop < triggerBottom) { box.classList.add("active"); } }); } });コード解説
このコードでは先ほどのコードとは異なり、一度付与したclassを削除することはないので、再読み込みなどをしない限り、スクロールで発火位置を超えたとき、一度のみのアニメーションが作動するようになっています。
また、こちらのコードもスクロール前に発火位置を超えている場合はスクロールしなくてもローディングが終了した時点でclass付けがされるようになっています。
まとめ
いかがでしたでしょうか。
よく紹介されているスクロールアニメーションのJavascriptはスクロール前に発火位置を超えた場合もちょっとスクロールしないとclass付けがされないものが多かったので今回上記コードを紹介させていただきました。