JSFiddle - React, Tailwind, and code Playground

by Michael Prosser

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="scollingcontainer" class="interaction" scroll-min="100" scroll-class="blackout">
  <div>
    <div class="header interaction" scroll-min="0" scroll-max="20" scroll-class="springout">
      
    </div>
  </div>
</div>

CSS

html{
  height:100%;
}
body{
  height:100%;
  margin:0px;
  transition:all 1s;
}
#scollingcontainer{
  position:fixed;
  top:0px;
  left:0px;
  right:0px;
  bottom:0px;
  height:100%;
  overflow:auto;
  transition:all 1s;
  perspective:500px;
}
#scollingcontainer>div{
  height:4000px;
}
.header{
  width:100%;
  background-color:#ff0000;
  height:200px;
  transition:all 1s;
  transform:rotateY(180deg);
}
.springout{
  transform:rotateY(0deg);
}
.blackout{
  background-color:#000;
}

JavaScript

var scrolltarget = $('#scollingcontainer');
var body = $('body');
var interactions = $('.interaction');

function plax(){
	
  interactions.each(function(){
  	
    var element = $(this);
    
  	if(parseInt(element.attr('scroll-min')) <= scrolltarget[0].scrollTop){
    
    	element.addClass(element.attr('scroll-class'));
      
    } else {
    	
      element.removeClass(element.attr('scroll-class'));
      
    }
    
    if(element.attr('scroll-max')){
    
      if(parseInt(element.attr('scroll-max')) <= scrolltarget[0].scrollTop){

        element.removeClass(element.attr('scroll-class'));

      }
      
    }
  
  });
  
	body.attr('data-scroll',scrolltarget[0].scrollTop);
	
}

scrolltarget[0].addEventListener("scroll", plax);