Увеличение изображения при скроле страницы

Question

Я пытался сделать это при помощи изменения высоты и ширины изображения при скроле, но это работает не совсем так, как я хотел. Хотел сделать то же самое, но с свойством transform: scale, но я не смог понять как это сделать.

    let bg = document.getElementById("head1")
    window.addEventListener("scroll", function(){
        bg.style.width = 100 + +window.pageYOffset/70+"%";
        bg.style.height = 100 + +window.pageYOffset/70+"%";

})

Answer 1

Значение масштаба = Изначальный масштаб + (Текущий скролл / Максимальный скролл) * Сила масштабирования

const bg = document.getElementById("head1");
window.addEventListener("scroll", () => {
    const { scrollTop, scrollHeight, clientHeight } = document.documentElement;

    // Получаем максимальное значение скролла
    const maxScroll = scrollHeight - clientHeight;

    // Вычисляем масштаб
    const power = 1.5;
    const scale = 1 + (scrollTop / maxScroll) * power;

    // Устанавливаем масштаб
    bg.style.transform = `scale(${scale})`;
});

Пример

БЛОГ НА HUSL

Увеличение изображения при скроле страницы

Ответы (1 шт):