parallax background #2

with vanilla-js, still can't figure out the offset setting

by Trina Lu

HTML

<div class="container">

  <section class="parallax" id="p1">
    <p>
      some content in here...
    </p>
  </section>
  <section class="block">
    This is block one.
  </section>
  <section class="parallax" id="p2"></section>
  <section class="block">
    This is block two.
  </section>
  <section class="parallax" id="p3"></section>

</div>

CSS

.container {
  width: 100%;
  background-color: #8bc34a;
  background-attachment: fixed;
  background-size: cover;
  background-repeat: no-repeat;
}

.parallax {
  background-attachment: fixed;
  /* background-size:cover; */
  background-position-x: center;
  /* background-position-y: center; */
  background-repeat: no-repeat;
  height: 500px;
  width: 100%;
}

.parallax p {
  padding: 10px;
  background: rgba(255, 255, 255, 0.57);
}

.block {
  height: 200px;
  width: 100%;
  background: rgba(0, 0, 0, 0.68);
  color: #FFF;
  text-align: center;
  line-height: 200px;
}

#p1 {
  background-image: url("http://www.minimit.com/images/picjumbo.com_IMG_6648.jpg");
}

#p2 {
  background-image: url("http://www.minimit.com/images/picjumbo.com_IMG_6643.jpg");
}

#p3 {
  background-image: url("http://www.minimit.com/images/picjumbo.com_DSC_3274.jpg");
}

JavaScript

var parallaxs = document.querySelectorAll('.parallax');
var prev = 0;
window.onscroll = function(e) {
  var scrolled = window.pageYOffset;
  if (prev <= scrolled) { //scrolling down
  } else {
  }
  prev = scrolled;
  parallaxs.forEach(p => {
    p.style.backgroundPositionY = (-scrolled * 0.3) + "px";
  });
}