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

Question

[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. Как установить через какой промежуток будет происходить переключение

Comments

[Just Me]

внешняя переменная i = 0 и i++ внутри события

[astaxov81]

Just Me, спасибо!

Answer 1

[Роман Якимчук]

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

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

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