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

    @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')
    }
    Ответ написан
    1 комментарий