Desplazamiento de paralaje de imagen (html+css+js)

Fuente: Interfaz de Duyi

1. Efecto:

Use la rueda del mouse para controlar el cambio hacia arriba y hacia abajo de las imágenes en la página web, y las imágenes se desplazarán infinitamente, de forma similar al carrusel.

2. Idea general

1. Para lograr un desplazamiento infinito, solo necesitamos considerar la imagen actual (cur), la imagen anterior (pre) y la imagen siguiente (siguiente), que se reemplazan por corchetes

2. La animación usa una transición para cambiar la altura de la imagen de 0 a 100%

3. Debe monitorear el evento de la rueda del mouse (rueda) y juzgar la dirección de la rueda del mouse de acuerdo con el deltaY devuelto

4. Es necesario monitorear el evento final de la animación de transición para cambiar dinámicamente el estilo de la imagen

3. Realización

Dado que los tres elementos de la imagen que debemos considerar cambian constantemente, elegimos usar JS para generar dinámicamente los elementos de la imagen aquí. El ancho inicial de cada imagen debe llenar la ventana gráfica. Inicialmente, solo se muestra la imagen actual, y otros la imagen está oculta. Esto se hace usando el posicionamiento CSS. Inicialmente, la altura de cur es 100vh, y la altura de pre y next es 0. Pre se coloca en la parte superior y next se coloca en la parte inferior. Regenere estas tres imágenes de acuerdo con la dirección de la rueda del mouse y cambie la altura de pre o next al 100%

1. Directorio

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

Desplazamiento de paralaje de imagen (html+css+js)

Supongo que te gusta