Parallax эффект 3d

Question

Есть ли инструмент или код, который бы смог реализовать 3d parallax эффект, кроме - locomotive-scroll.

Пример:

Answer 1

Тут есть вариант, сделать при scroll некое смещение и прибавить к нему какой то data-attribute

смотрим пример

window.addEventListener("scroll", function(e) {
  console.log(scrollY);
  let divs = document.querySelectorAll(".container div");
  divs.forEach(function(div) {
    let scr = div.getAttribute("data-scroll");
    div.style.transform = `translate(0, -${scrollY * scr}px)`;
  });
});

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  max-width: 600px;
  margin: auto;
  overflow: auto;
}

.container div {
  width: 40%;
}

img {
  display: block;
  max-width: 100%;
  object-fit: cover;
  transition: 2s linear;
}

.container div:nth-child(odd) {
  margin-top: 50px;
}

.container div:nth-child(even) {
  margin-top: 80px;
  margin-left: -20px;
}

<div class="container">

  <div data-scroll="2">
    <img src="https://images.pexels.com/photos/3831881/pexels-photo-3831881.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="">
  </div>

  <div data-scroll="1">
    <img src="https://images.pexels.com/photos/3680316/pexels-photo-3680316.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="">
  </div>

  <div data-scroll="5">
    <img src="https://images.pexels.com/photos/3671083/pexels-photo-3671083.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="">
  </div>

  <div data-scroll="2">
    <img src="https://images.pexels.com/photos/4155487/pexels-photo-4155487.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="">
  </div>

  <div data-scroll="3">
    <img src="https://images.pexels.com/photos/2346735/pexels-photo-2346735.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="">
  </div>

  <div data-scroll="3">
    <img src="https://images.pexels.com/photos/4611971/pexels-photo-4611971.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" data-scroll="3" alt="">
  </div>

  <div data-scroll="4">
    <img src="https://images.pexels.com/photos/3851294/pexels-photo-3851294.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="">
  </div>
</div>

БЛОГ НА HUSL

Parallax эффект 3d

Ответы (1 шт):