JSFiddle - React, Tailwind, and code Playground

by Michael Prosser

HTML

<div class="parallax">
    <div class="wallpaper wallpaper1"></div>
    <div class="wallpaper wallpaper2"></div>
    <div class="wallpaper wallpaper3"></div>
    <div class="label1">Michaela Sollbock Photography<span>scroll down</span></div>
    <div class="blind blind1"></div>
    <div class="blind blind1"></div>
    <div class="blind blind1"></div>
    <div class="blind blind1"></div>
    <div class="blind blind1"></div>
    <div class="blind blind1"></div>
    <div class="blind blind1"></div>
    <div class="blind blind1"></div>
    <div class="blind blind1"></div>
    <div class="blind blind1"></div>
    <div class="blind blind1"></div>
    <div class="blind blind1"></div>
    <div class="blind blind1"></div>
    <div class="blind blind1"></div>
    <div class="menu">Gallery 1</div>
    <div class="menucontent content1"><button>View Gallery</button><span>Sed posuere consectetur est at lobortis.</span></div>
    <div class="menu">Gallery 2</div>
    <div class="menucontent content2"><button>View Gallery</button><span>Sed posuere consectetur est at lobortis.</span></div>
    <div class="menu">Gallery 3</div>
    <div class="menucontent content3"><button>View Gallery</button><span>Sed posuere consectetur est at lobortis.</span></div>
    <div class="menu">Gallery 4</div>
    <div class="menucontent content4"><button>View Gallery</button><span>Sed posuere consectetur est at lobortis.</span></div>
    <div class="menu">Gallery 5</div>
    <div class="menucontent content5"><button>View Gallery</button><span>Sed posuere consectetur est at lobortis.</span></div>
    <div class="blind blind2"></div>
    <div class="blind blind2"></div>
    <div class="blind blind2"></div>
    <div class="blind blind2"></div>
    <div class="blind blind2"></div>
    <div class="blind blind2"></div>
    <div class="blind blind2"></div>
    <div class="blind blind2"></div>
    <div class="blind blind2"></div>
    <div class="blind blind2"></div>
    <div class="blind blind2"></div>
   ...

CSS

body,html{
    height:100%;
    background-color: #ebebeb;
}
.parallax {
    position:fixed;
    top:30px;
    bottom:30px;
    left:30px;
    right:30px;
    overflow-y:auto;
    overflow-x:hidden;
    -webkit-perspective:1000px;
    -moz-perspective:1000px;
    -o-perspective:1000px;
    -ms-perspective:1000px;
    perspective:1000px;
    z-index:1;
}
.parallax .label1{
    font-size:32px;
    font-family:tahoma;
    color:#000000;
    background: -moz-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(255,255,255,0.78) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,0.78))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(255,255,255,0.78) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(255,255,255,0.78) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(255,255,255,0.78) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(255,255,255,0.78) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#c7ffffff',GradientType=0 ); /* IE6-9 */
padding:30px;
    position:absolute;
    top: 200px;
    left:200px;
    right:200px;
    z-index:101;
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -o-transition: all 1s;
    -ms-transition: all 1s;
    transition: all 1s;
}
.parallax .label1 span{
    font-size:14px;
    margin-left:40px;
}
.parallax .wallpaper {
    background-size:cover;
    background-position:center center;
    position:fixed;
    top:-300px;
    bottom:-100px;
    left:-300px;
    right:-300px;
    z-index:0;
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -o-transition: all 1s;
    -ms-transition: all 1s;
    transition: all 1s;
}
.parallax .wallpaper1 {
   ...

JavaScript

var parallax = function(){
    
    this.elements = new Array();
    
    this.elements.push('.blind1');
    this.elements.push('.wallpaper1');
    this.elements.push('.label1');
    this.elements.push('.blind1');
    this.elements.push('.menucontent');
    this.elements.push('.blind2');
    this.elements.push('.wallpaper2');
    this.elements.push('.blind3');
    this.elements.push('.wallpaper3');
    
    this.elements_pos = new Array();
    
    this.elements_pos.push(100);
    this.elements_pos.push(1);
    this.elements_pos.push(100);
    this.elements_pos.push(900);
    this.elements_pos.push(600);
    this.elements_pos.push(1200);
    this.elements_pos.push(1200);
    this.elements_pos.push(1800);
    this.elements_pos.push(1800);
    
    this.elements_classes = new Array();
    
    this.elements_classes.push('rotate-x-55');
    this.elements_classes.push('translate-y-200');
    this.elements_classes.push('translate-z-1000');
    this.elements_classes.push('rotate-x-0');
    this.elements_classes.push('');
    this.elements_classes.push('rotate-x-55');
    this.elements_classes.push('translate-y-1600');
    this.elements_classes.push('rotate-x-55');
    this.elements_classes.push('translate-y-3200');
    
    this.elements_classes_remove = new Array();
    
    this.elements_classes_remove.push('');
    this.elements_classes_remove.push('');
    this.elements_classes_remove.push('');
    this.elements_classes_remove.push('');
    this.elements_classes_remove.push('menucontentopen');
    this.elements_classes_remove.push('');
    this.elements_classes_remove.push('');
    this.elements_classes_remove.push('');
    this.elements_classes_remove.push('');
  
    
    var parallax = this;
    
    $('.parallax').scroll(function(e){
        
        parallax.interact($('.parallax').scrollTop());
        
    });
    
    $('.menu').click(function(e){
        
        $('.menucontent').removeClass('menucontentopen');
        
       ...