@astaxov81

Как изменить скорость анимации взависимости от количества изображений?

Здравствуйте.
Который день ломаю голову и немогу найти подходящего решения. Имею скрипт выполняющий плавное переключение изображений (за счет чего достигается эффект повората изображения) при прокрутке вверх и вниз страницы.
function scrollTracking() {
    var lastScrollTop = 0;
    var startScroll = false;
    $(document).on('scroll.scrollTracking' + idBlock, function () {
        var currentScrollTop = $(this).scrollTop();
        var stackImages = self.find('img');
        var visibleImages = self.find('img:visible');
        var lastImageSrc = stackImages.last().attr('src');
        var firstImageSrc = stackImages.first().attr('src');

        if (startScroll === false) {
            startScroll = true;
        } else if (startScroll === true && currentScrollTop > lastScrollTop) {
            $.each(visibleImages, function () {
                if (visibleImages.attr('src') !== lastImageSrc) {
                    $(this).fadeOut(timeFadeOut);
                    $(this).next().fadeIn(timeFadeIn);
                }
            });
            startScroll = false;
            //console.log('Прокрутка вниз');
        } else if (startScroll === true && currentScrollTop < lastScrollTop) {
            $.each(visibleImages, function () {
                if (visibleImages.attr('src') !== firstImageSrc) {
                    $(this).fadeOut(timeFadeOut);
                    $(this).prev().fadeIn(timeFadeIn);
                }
            });
            startScroll = false;
            //console.log('Прокрутка вверх');
        }
        lastScrollTop = currentScrollTop;
    });
}


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

Можно ли как-то привязаться к количеству изображений и в зависимости от высоты блока, куда помещены изображения - заставить их пройти от ПЕРВОЙ до ПОСЛЕДНЕЙ?

Например, два блока (высота пусть будет одинаковой) с раскадровкой изображения
1:
<div class="anim-block">
    <img class="img1"/>
    <img class="img2"/>
    <img class="img3"/>
    ...
    <img class="img99"/>
    <img class="img100"/>
</div>

2:
<div class="anim-block">
    <img class="img1"/>
    <img class="img2"/>
    <img class="img3"/>
    ...
    <img class="img29"/>
    <img class="img30"/>
</div>


Как сделать что бы пока прокручивается блок, прошло переключение от первого до последнего изображения.
* Сам скрипт стараюсь сделать универсальный, что бы не писать под каждый блок.
  • Вопрос задан
  • 73 просмотра
Пригласить эксперта
Ответы на вопрос 1
ArsenyMatytsyn
@ArsenyMatytsyn Куратор тега JavaScript
Руководитель frontend направления, предприниматель
Я так понял, речь о том, чтобы задавать timeFadeOut. Дальше я так понял ты не листаешь, а переключаешь отображение через fade-функцию жиквери.

Итого, если тебе необходимо посчитать скорость переключения всех изображений, то смело считай их количество через document.querySelectorAll([идентификатор]) и эталонную скорость дели на количество, добытое через length.

let images = document.querySelectorAll([идентификатор]);
let imagesCount = images.length;
let speed = timeFadeOut / imagesCount;


Но как я понимаю, нужно сделать скорость от текущего, т.е. если ты в середине, то скорость проходки для всех будет не актуальна. Тогда ты можешь взять индекс текущего во вьюпорте или просто активного изображения и при движении вверх делить эталонную скорость на индекс, а вперед → разница количества элементов и индекса.

В идеале бы код увидеть в действии, стоило залить его, например на https://codepen.io/, поэтому скорее всего мой ответ будет неточен, но ключи все есть.
Ответ написан
Ваш ответ на вопрос

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

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