CMS
- 1 ответ
- 0 вопросов
0
Вклад в тег
<img data-source="/img/frames/" data-frames="50" data-height="1300" src="" alt="">
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')
}