@astaxov81

Плавное переключение изображения при прокрутке. Как реализовать?

Здравствуйте.

Не могу сообразить как реализовать такую фичу:
На странице есть, например 20 изображений
<div class="wrapper-img">
    <img src="img/1.jpg">
    <img src="img/2.jpg" style="display: none;">
    <img src="img/3.jpg" style="display: none;">
    ...
    <img src="img/20.jpg" style="display: none;">
</div>


Как по скролу добиться переключения изображений, то есть 1 - скрываем, 2 - выводим и т.д. Набрасал примерный js:
$(document).ready(function () {
    $(document).on('scroll', function () {
        var stackImages = $('.wrapper-img').find('img');
            // stackImages.hide().eq($(this).index()).css("display", "block"); - срабатывает один раз, то есть скрывает картинку1, делает видимой картинку 2
        for (var i = 0; i < stackImages.length; i++){
            // ...
        }
    });
});


Вопросы, которые появилсь:
1. Как заставить переключать изображения при прокрутке
2. Как установить через какой промежуток будет происходить переключение
  • Вопрос задан
  • 124 просмотра
Пригласить эксперта
Ответы на вопрос 1
Для таких штук обычно нужна высота изображений и размер контейнера изображений. Считается скролл, расчитывается текущая позиция, и через высоту элементов и размеры контейнера считается какие элементы сейчас должны быть видны. Остальные, соответственно, скрываются.

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

Если без хардкода, но не очень красиво, то можно при прокрутке для картинок считать руками видимы ли они (через позицию скролла и положение картинки относительно родительского элемента, например), и скрывать все остальные.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы