JSFiddle - React, Tailwind, and code Playground

by HYEONGJINKIM

HTML

<script src="http://prinzhorn.github.io/skrollr/dist/skrollr.min.js"></script>
<main class="parallax-body loading" data-smooth-scrolling="off">
    <section id="performance" class="performance" data-smooth-scrolling="off">
        <div class="slide-3 homeSlide" data-0="visibility:visible; z-index:2;"data-anchor-target="#performance"></div>
        <div class="clip-mask slide-4 homeSlide" data-0-top="visibility:hidden;" data--50-top="position:fixed; visibility:visible;" data-anchor-target="#performance">
            <div class="slide-4-bg" data-0-top="" data--50-top="-webkit-clip-path: polygon(20% 100%, 74% 0%, 75% 0%, 21% 100%); -moz-clip-path: polygon(20% 100%, 74% 0%, 75% 0%, 21% 100%); clip-path: polygon(20% 100%, 74% 0%, 75% 0%, 21% 100%); background-position:50% 0%;" data--200-top=" -webkit-clip-path: polygon(-50% 100%, 0% 0%, 150% 0%, 100% 100%); -moz-clip-path: polygon(-50% 100%, 0% 0%, 150% 0%, 100% 100%); clip-path: polygon(-50% 100%, 0% 0%, 150% 0%, 100% 100%); background-position:30% 0%;" data--250-top=" background-position:20% 0%;" data-anchor-target="#performance"></div>
        </div>
    </section>
    <main>

CSS

.performance{height:500px;}
.homeSlide {
    position:relative;
}
.fixed {
    position:fixed;
    top:0;
}
.slide-3 {
    z-index:2;
    position:fixed;
    background:url(http://concepts.climaxmedia.com/tlx/images/interior_01.jpg) no-repeat;
    background-size:cover;
    width:100%;
    height:100%;
    top:0;
}
.slide-4 {
    height:100%;
    z-index:7;
    top:0;
    width:100%;
    height:100%;
}
.slide-4-bg {
    background:url(http://concepts.climaxmedia.com/tlx/images/slide_2_fr.png) no-repeat;
    background-size:cover;
    width:100%;
    height:100%;
    position:absolute;
}

JavaScript

( function( $ ) {
  
    //variables
    $window = $(window);
    $slide = $('.homeSlide');
    $performance = $('.performance');
    $loadingContainer = $('.parallax-body');
    
    // //FadeIn all sections   
    
              
              // Resize sections
    adjustWindow();
              
              // Fade in sections
      
    
    function adjustWindow(){
        
    // Init Skrollr
    var s = skrollr.init({
        render: function(data) {
            //Debugging - Log the current scroll position.
            //console.log(data.curTop);
            }
        });
        forceHeight: false
        
        // Get window size
        winH = $window.height();
        
        // Keep minimum height 550
        if(winH <= 550) {
            winH = 550;
        } 
        
        // Resize our slides
        $slide.height(winH);
        $performance.height(winH*1.5);


        
        // Refresh Skrollr after resizing our sections
        s.refresh($slide);
        s.refresh($performance);
  
    }
        
    
} )( jQuery );