CODEWITHSUNDEEP
javascripthtmlcss
hey
hey

Reputation: 118

How to parallax?

I'm trying to learn how to use the parallax effect using simple JavaScript and CSS.

my JavaScript is :

window.addEventListener('scroll', function(){
  document.getElementById("second").style.left = window.scrollY + 'px';
  document.getElementById("third").style.left = window.scrollY + 'px';
})

from my understanding of things, it should make the element called third and second scroll left by the same value as the vertical scroll. But it doesn't work and I can't find what's the problem here.

My whole code is:

* {
  scroll-behavior: smooth;
}

body {
  size: 100%;
  margin-top: 0px;
  margin-left: 0px;
}

section {
  position: relative;
  width: 100%;
  height: 100vh;
  padding: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
}

section::before {
  content: '';
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 100px;
  background-image: linear-gradient(to bottom right, #350529, #45392c);
  z-index: 100;
}

section img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

section img#sixth {
  z-index: 10;
}

#text {
  position: absolute;
  color: white;
  white-space: nowrap;
  font-size: 7.5vw;
  z-index: 9;
}
<section>
  <img src="Plan-parallax-1.png" id="first">
  <img src="Plan-parallax-2.png" id="second">
  <img src="Plan-parallax-3.png" id="third">
  <img src="Plan-parallax-4.png" id="fourth">
  <img src="Plan-parallax-5.png" id="fifth">
  <h2 id="text">Monde parallele</h2>
  <img src="Plan-parallax-6.png" id="sixth">
</section>
<script>
  window.addEventListener('scroll', function() {
    document.getElementById("second").style.left = window.scrollY + 'px';
    document.getElementById("third").style.left = window.scrollY + 'px';
  })
</script>

Upvotes: 1

Views: 61

Answers (1)

wouch
wouch

Reputation: 1241

If your code is simplified down to just focus on the question of moving an element based on scroll, it works fine. Example included

window.addEventListener('scroll', function() {
  document.getElementById("second").style.left = window.scrollY + 'px';
})
* {
  scroll-behavior: smooth;
}

section {
  position: relative;
  width: 100%;
  height: 100vh;
  padding: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
}

section::before {
  content: '';
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 100px;
  background-image: linear-gradient(to bottom right, #350529, #45392c);
  z-index: 100;
}

section img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
<!DOCTYPE html>
<html>

<body style="size: 100%; margin-top: 0px; margin-left: 0px;">
  <section>
    <img src="https://picsum.photos/600" id="second">
  </section>
</body>

</html>

Upvotes: 2

Related Questions