android短影片開發，圖片視差滾動

android短影片開發，圖片視差滾動

const imgs = ['./assets/1.jpg', './assets/2.png', './assets/3.jpg']
let currentIndex = 0
const scrollContainer = document.querySelector('.scroll-container')
 
function creatItem(index) {
  let imgUrl = imgs[index]
  const item = document.createElement('div')
  item.classList.add('item')
  item.innerHTML = `<img src=${imgUrl} />`
  scrollContainer.appendChild(item)
  return item
}
 
function init() {
  scrollContainer.innerHTML = ''
  let preIndex = currentIndex - 1 < 0 ? imgs.length - 1 : currentIndex - 1
  let nextIndex = currentIndex + 1 > imgs.length - 1 ? 0 : currentIndex + 1
  creatItem(preIndex).classList.add('pre')
  creatItem(currentIndex).classList.add('cur')
  creatItem(nextIndex).classList.add('next')
}
 
init()
 
let isAnimation = false
scrollContainer.addEventListener('wheel', (e) => {
  if ((e.deltaY = 0)) {
    return
  }
  if (isAnimation) {
    return
  }
  isAnimation = true
  if (e.deltaY > 0) {
    //向下滾動
    scrollContainer.classList.add('scroll-down')
    currentIndex = currentIndex + 1 > imgs.length - 1 ? 0 : currentIndex + 1
  } else {
    //向上滾動
    scrollContainer.classList.add('scroll-up')
    currentIndex = currentIndex - 1 < 0 ? imgs.length - 1 : currentIndex - 1
  }
})
 
scrollContainer.addEventListener('transitionend', (e) => {
  isAnimation = false
  scrollContainer.classList.remove('scroll-up')
  scrollContainer.classList.remove('scroll-down')
  init()
})

以上就是android短影片開發，圖片視差滾動， 更多內容歡迎關注之後的文章