Затухание в анимации прокрутки ⇐ CSS

[Anonymous]

Итак, я нашел этот код и хочу добавить к этой анимации небольшое затухание. Итак, при одной прокрутке он проходит через несколько кадров, и я хочу добавить две вещи, с которыми мне нужна помощь. Итак, во-первых, как заставить его проходить больше кадров за одну прокрутку, и, во-вторых, как добавить эффект затухания к одной прокрутке? Да, я пока довольно туп в JS.


< pre class="snippet-code-js lang-js Prettyprint-override">

Код: Выделить всё

const html = document.documentElement;
const canvas = document.getElementById("hero-lightpass");
const context = canvas.getContext("2d");

const frameCount = 148;
const currentFrame = index => (
`https://www.apple.com/105/media/us/airpods-pro/2019/1299e2f5_9206_4470_b28e_08307a42f19b/anim/sequence/large/01-hero-lightpass/${index.toString().padStart(4, '0')}.jpg`
)

const preloadImages = () => {
for (let i = 1; i < frameCount; i++) {
const img = new Image();
img.src = currentFrame(i);
}
};

const img = new Image()
img.src = currentFrame(1);
canvas.width = 1158;
canvas.height = 770;
img.onload = function() {
context.drawImage(img, 0, 0);
}

const updateImage = index => {
img.src = currentFrame(index);
context.drawImage(img, 0, 0);
}

window.addEventListener('scroll', () => {
const scrollTop = html.scrollTop;
const maxScrollTop = html.scrollHeight - window.innerHeight;
const scrollFraction = scrollTop / maxScrollTop;
const frameIndex = Math.min(
frameCount - 1,
Math.ceil(scrollFraction * frameCount)
);

requestAnimationFrame(() => updateImage(frameIndex + 1))
});

preloadImages()

Код: Выделить всё

html {
height: 100vh;
}

body {
height: 500vh;
background: #000;
}

canvas {
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
max-width: 100vw;
max-height: 100vh;
}

Код: Выделить всё

Я несколько раз пытался сделать это сам, но думаю, что просто не понял код.

Подробнее здесь: https://stackoverflow.com/questions/792 ... -animation