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

Question

[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>

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

Answer 1

[Арсений Матыцин]

Я так понял, речь о том, чтобы задавать timeFadeOut. Дальше я так понял ты не листаешь, а переключаешь отображение через fade-функцию жиквери.

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

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

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

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

Comments

[astaxov81]

Согласен. Сейчас кину пример...причем сам вопрос писал в три захода. точнее три раза редактировал)) Такая задача за все время разработки - первый раз.

Да погугли, ничего похожего не нашел. Чем-то схож старенький плагин Brazzers-Carousel (но там штука по ховеру, что в моей ситуации не применимо).

[astaxov81]

Арсений Матыцин, Вот рабочий пример.

Первый блок при скроле (если прокручивть не медлено, а как обычно листаешь страницу) может не прокрутиться полностью.

Второй блок - изображений в два разме меньше и дела с ним обстоят норм. Вот мне хотелось бы:
1) иметь возможность ускорять унимаю
2) СДелать так, что бы все вложенные картинки отработали в рамках, когда когда блок в области видимости

[Арсений Матыцин]

astaxov81, ага, понял. У меня в работе такого мало, но вообще могу сходу предложить пару вариантов:
1. Считать прокрутку, считать отступ от блока с картинками, при начале пересечения рассчитывать пройденное расстояние в рамках блока с картинкой и менять картинки в зависимости от пройденного расстояния деля на количество кадров (читай паралакс эфект). Картинку можно как фиксировать (position:sticky), а размер обертки фиксировать (расчетно) умножая количество кадров на проходку для него.
2. +- то же самое реализовать с помощью центрированного background-а. Т.е. без пикч в чистом виде. Тут можно глянуть в сторону background-attachment:fixed (если оно еще живое).

И дальше в том или подобных ключах.

[astaxov81]

Арсений Матыцин, блин днем прочитал, вечером прочитал и не раз. Въехать че-т не могу.

считать отступ от блока с картинками

У меня такого нет, стилизация блок->картинки:

.rotation-image-scroll .scroll-img{
	position: absolute;
	top: 0;
	left: 0;
}

spoiler

рассчитывать пройденное расстояние в рамках блока с картинкой и менять картинки в зависимости от пройденного расстояния деля на количество кадров (читай паралакс эфект)

Особенно не въехал тут, фактически у меня переключение производиться

$(this).fadeOut(10);
$(this).next().fadeIn(10);

Просто даже прочтя решение, я не могу понять, мне фактически в обертку подгружать одно изображение, а его переключение производить в скрипте (меняя src)?

Ну и задача, который день сиду, с один вопросом :) и никак совладать не могу...