Блог

Главная - Вопросы по программированию - Масштабирование при прокрутке

Масштабирование при прокрутке

#javascript

#javascript

Вопрос:

У меня есть горизонтальная прокрутка, и во время прокрутки я хотел бы масштабировать изображения вверх и вниз, чтобы получить некоторый эффект.

Итак, с этим скроллером :

 <div class="scroller" id="scroller">
    <div class="galleryPhoto">
        <div class="Photo" id="Photo1" style="background-image: url(https://picsum.photos/700/1200);"></div>
    </div>

    <div class="galleryPhoto">
        <div class="Photo" id="" style="background-image: url(https://picsum.photos/800/1200);"></div>
    </div>
</div>

Я получаю этот обратный вызов, но он не будет масштабироваться, независимо от того, какое число я туда поместил.

 $("#scroller").on("scroll", function (e) {
    let horizontal = e.currentTarget.scrollLeft;
    let vertical = e.currentTarget.scrollTop;
    var box = document.getElementById('Photo1');

    var x = screen.width;

    console.log(1 - (horizontal / x));
    box.scale = (1.5, 1.5);
});

Комментарии:

1. Вы пропустили закрывающий </div> тег? или это просто не скопировано на вопрос?

2. Нет, просто скопируйте код быстро, чтобы показать, что я делаю. Он работает и прокручивается, просто не масштабируется.

Ответ №1:

Вы можете использовать эффекты параллакса. есть несколько вариантов прокрутки, которые вы можете использовать.