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

Question

[Тимур Худиев]

Доброго времени суток.
Как можно реализовать смену изображений для эффекта видео?
И что бы работала в обе стороны. Т.е при скролле вниз менялись в одном направлении, а при скролле вверх в обратном.
И главная задача что бы эта анимация работала, только тогда, когда блок с изображениями находится в поле видимости.
Т.е весь цикл анимации должен проходить в этом промежутке, когда блок на экране.

Делал так: позиционировал все изображения в блоке абсолютно и при скролле добавлял по очереди каждому следующему изображению z-index + 1.

var step=100,
     img = 1,
     scrollPos = 0;

    $(window).scroll(function(){
        var index = $(this).scrollTop();

        if (index > scrollPos){ //скролл вниз

            if (index > step) {

                if(img < 11){
                    step+=100;
                    $('.animation-container > img.an-'+img).css({'z-index' : img});
                    img+=1;
                }

            }

        } else {

            //Скролл вверх

        }
        scrollPos = index;
    });

Но все работает криво и никуда не годится

Comments

[Сергей Сергей]

видимо, нужно проматывать все кадры до вычисляемого от скролла кадра? причем с фпс 25? и при быстром прокручивании переход происходит рывком к далёкому кадру?

[Тимур Худиев]

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

Answer 1

[wladislaw353]

Не занимайтесь ерундой с видео!
Все делается буквально в пару строк кода и работает стабильнее

<img data-source="/img/frames/" data-frames="50" data-height="1300" src="" alt="">

Кол-во кадров: 50
Картинки называем 1.jpg, 2.jpg и тд
Высота 1300px, при скролле которой равномерно меняются кадры.

const $img            = document.querySelector('img')
const imgSource       = $img.getAttribute('data-source')
const framesCount     = $img.getAttribute('data-frames')
const scrollingHeight = $img.getAttribute('data-height')

changeFrame(window.scrollY)

document.addEventListener('scroll', () => {
    changeFrame(window.scrollY)
})

function changeFrame(scrollY) {
    let frame = parseInt(scrollY / (scrollingHeight / framesCount) + 1)
    frame = frame > framesCount ? framesCount : frame
    $img.setAttribute('src', imgSource + frame + '.jpg')
}

Comments

[SergeiSh]

А подскажите плиз, как сделать так, чтобы при прокрутке к определённому блоку, он фиксировался и срабатывала эта функция?

Answer 2

[Денис Букреев]

А зачем юзать кучу картинок, когда их можно слепить в видео и работать уже с ним?
У меня был похожий проект, я долго долбился в картинки, но лучшим решением оказалось именно использование видео

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

Comments

[Тимур Худиев]

Денис Букреев Да и видео пробовал с перемоткой в зависимости от направления скролла. Может подскажете как грамотно сделать с видео? Буду очень благодарен. А то уже третий день сижу и ничего не получается

[Тимур Худиев]

Денис Букреев

А зачем юзать кучу картинок, когда их можно слепить в видео и работать уже с видео?

Так я из видео и сделал кучу картинок)

[Денис Букреев]

Тимур Худиев, я уже плохо помню какие проблемы были и как я их решал, но это было тоже небольшим адом)
Во-первых, я анимировал через requestAnimationFrame
Во-вторых, заставил видеомейкера извлечь нужные кадры и собрать их в видео, в котором только эти нужные кадры с fps 30, т.е. 60 картинок слепились бы в двухсекундное видео. В итоге я изи разбивал длительность ролика на кол-во кадров и без проблем переключался на нужный кадр.
В-третьих, была какая-то головка с тем, что если нормально отображалось в хроме, то все по бороде шло с сафари, и наоборот. Какой компромисс я нашел - не помню. Ну и + IнвалидEксплорер
В-четвертых, надо было отслеживать в процентах загрузку видео, там тоже были проблемы с IнвалидEксплорер

Ну и мобильная версия - тоже любилово было

[Тимур Худиев]

Денис Букреев, Да уж, не весело однако)