JSFiddle - React, Tailwind, and code Playground

by hodca

HTML

<div class="section">
  <div style="top: 62%; left: 46.3%;" data-px-per-scroll="5" class="l-parallax_item"></div>
  <div style="top: 74%; left: 37.7%;" data-px-per-scroll="5" class="l-parallax_item"></div>
  <div style="top: 68.5%; left: 56%;" data-px-per-scroll="5" class="l-parallax_item"></div>
  <div style="top: 0.5%; left: 75%;"  data-px-per-scroll="5" class="l-parallax_item"></div>
  <div style="top: 15.9%;left: 7.1%;" data-px-per-scroll="5" class="l-parallax_item"></div>
</div>

CSS

body {
  height: 4000px;
  background: grey;
}

.section {
  height: 400px;
  width: 100%;
  position: relative;
  overflow: hidden;
  background: black;
}

.l-parallax_item {
  background: white;
  height: 60px;
  width: 60px;
  border-radius: 6px;
  position: relative;
}

JavaScript

var parallaxElements = document.getElementsByClassName("l-parallax_item");
var lastScrollTop = 0;

window.onscroll = function() {

    var st = window.pageYOffset || document.documentElement.scrollTop; 

    if (st > lastScrollTop){
    	console.log("bottom");
		for(i = 0; i < parallaxElements.length; i++) {
			var position = parallaxElements[i].offsetTop;
			var movePx = parallaxElements[i].getAttribute("data-px-per-scroll");
			parallaxElements[i].style.top = (position - parseInt(movePx))+"px";

		}
    } else {
    	console.log("top");
		for(i = 0; i < parallaxElements.length; i++) {
			var position = parallaxElements[i].offsetTop;
			var movePx = parallaxElements[i].getAttribute("data-px-per-scroll");
			parallaxElements[i].style.top = (position + parseInt(movePx))+"px";
		}
    }

   lastScrollTop = st <= 0 ? 0 : st; // For Mobile or negative scrolling

}