JSFiddle - React, Tailwind, and code Playground

by Michael Prosser

HTML

<div class="parallax">
    <img class="step-1" src="http://aninoob.com/assets/galleries/amazing-sea-resort-high-definition-wallpapers.jpg" />
    <img class="step-2" src="http://aninoob.com/assets/galleries/amazing-sea-resort-high-definition-wallpapers.jpg" />
    <img class="step-3" src="http://aninoob.com/assets/galleries/amazing-sea-resort-high-definition-wallpapers.jpg" />
    <img class="step-4" src="http://aninoob.com/assets/galleries/amazing-sea-resort-high-definition-wallpapers.jpg" />
    <img class="step-5" src="http://aninoob.com/assets/galleries/amazing-sea-resort-high-definition-wallpapers.jpg" />
</div>

CSS

.parallax {
    position:fixed;
    top:0px;
    bottom:0px;
    left:0px;
    right:0px;
    height:1800px;
    overflow-y:auto;
    overflow-x:hidden;
    -webkit-perspective:1000px;
    -moz-perspective:1000px;
    -o-perspective:1000px;
    -ms-perspective:1000px;
    perspective:1000px;
}
.parallax img {
    position:relative;
    margin-left:auto;
    margin-right:auto;
    display:block;
    width:1200px;
    height:600px;
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -o-transition: all 1s;
    -ms-transition: all 1s;
    transition: all 1s;
}
.parallax .rotate-x-45 {
    -webkit-transform: rotateX(45deg);
    -moz-transform: rotateX(45deg);
    -o-transform: rotateX(45deg);
    -ms-transform: rotateX(45deg);
    transform: rotateX(45deg);
}

JavaScript

var parallax = function(){
    
    this.elements = new Array();
    
    this.elements.push('.step-1');
    this.elements.push('.step-2');
    this.elements.push('.step-3');
    this.elements.push('.step-4');
    this.elements.push('.step-5');
    
    this.elements_pos = new Array();
    
    this.elements_pos.push(100);
    this.elements_pos.push(300);
    this.elements_pos.push(500);
    this.elements_pos.push(700);
    this.elements_pos.push(900);
    
    this.elements_classes = new Array();
    
    this.elements_classes.push('rotate-x-45');
    this.elements_classes.push('rotate-x-45');
    this.elements_classes.push('rotate-x-45');
    this.elements_classes.push('rotate-x-45');
    this.elements_classes.push('rotate-x-45');
    
    var parallax = this;
    
    $('.parallax').scroll(function(e){
        
        parallax.interact($('.parallax').scrollTop());
        
    });
                          
    this.interact = function(position){
        
        console.log(position);
        
        for(i=0;i<parallax.elements.length;i++){
            
            if(position < parallax.elements_pos[i]){
                
                if($(parallax.elements[i]).hasClass(parallax.elements_classes[i])){
                    
                    $(parallax.elements[i]).removeClass(parallax.elements_classes[i]);
                    
                }
                
            } else {
                
                if(!$(parallax.elements[i]).hasClass(parallax.elements_classes[i])){
                    
                    $(parallax.elements[i]).addClass(parallax.elements_classes[i]);
                    
                }
                
            }
            
        }
        
    }
    
}

$(document).ready(function(){
    
    parallax = new parallax;
    
});