Image parallax scrolling (html+css+js)

Source: Duyi Frontend

1. Effect:

Use the mouse wheel to control the up and down switching of the pictures on the webpage, and the pictures will scroll infinitely, similar to the carousel

2. General idea

1. To achieve infinite scrolling, we only need to consider the current picture (cur), the previous picture (pre), and the next picture (next), which are replaced by brackets

2. The animation uses a transition to change the height of the picture from 0 to 100%

3. You need to monitor the mouse wheel event (wheel), and judge the direction of the mouse wheel according to the returned deltaY

4. It is necessary to monitor the transition animation end event to dynamically change the style of the picture

3. Realization

Since the three image elements we need to consider are constantly changing, we choose to use JS to dynamically generate the image elements here. The initial width of each image needs to fill the viewport. Initially, only the current image is displayed, and other The picture is hidden. This is done using CSS positioning. Initially, the height of cur is 100vh, and the height of pre and next is 0. Pre is positioned at the top, and next is positioned at the bottom. Regenerate these three images according to the direction of the mouse wheel, and change the height of pre or next to 100%

1. Directory

2.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>视差滚动</title>
</head>

<body>
  <div class="scroll-container"></div>
</body>
<script src="./index.js"></script>

<style>
  * {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
  }

  body {
    overflow: hidden;
  }

  .item {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
    transition: 1s ease-in-out;
  }

  .item img {
    position: absolute;
    width: 100%;
    height: 100vh;
    object-fit: cover;
    transition: 1s ease-in-out;
  }

  .scroll-container {
    height: 100vh;
    position: relative;
  }

  .item.pre,
  .item.next {
    z-index: 1;
    height: 0;
  }

  .item.pre {
    top: 0;
  }

  .item.next {
    bottom: 0
  }

  .item.pre img {
    transform: translateY(-10%);
  }

  .item.next img {
    bottom: 0;
    transform: translateY(10%);
  }

  .scroll-up .pre,
  .scroll-down .next {
    height: 100%;
  }

  .scroll-up .pre img {
    transform: translateY(0);
  }

  .scroll-up .cur img {
    transform: translateY(10%);
  }

  .scroll-down .next img {
    transform: translateY(0);
  }

  .scroll-down .cur img {
    transform: translateY(-10%);
  }
</style>

</html>

3.js

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()
})

Image parallax scrolling (html+css+js)

Guess you like