JSFiddle - React, Tailwind, and code Playground

by bizamajig

HTML

<script src="https://cdn.rawgit.com/gdsmith/jquery.easing/master/jquery.easing.js"></script>
<link rel="stylesheet" href="https://cdn.rawgit.com/alvarotrigo/multiscroll.js/master/jquery.multiscroll.css">
<script src="https://cdn.rawgit.com/alvarotrigo/multiscroll.js/master/jquery.multiscroll.js"></script>
<div class="hello">HELLO</div>

<div id="myContainer">

    <div class="ms-left">
        <div class="ms-section firstelement" id="left1">
             <h1>Left 1 </h1>
        </div>

        <div class="ms-section" id="left2">
            <h1>Left 2 </h1>
        </div>

    
    </div>

    <div class="ms-right">
        <div class="ms-section firstelement" id="right1">
            <h1>Right 1</h1>
        </div>

        <div class="ms-section" id="right2">
            <h1>Right 2</h1>
        </div>

    
    </div>  
</div>

CSS

.hello{
    display:none;

    position:fixed;
    top:0;
    right:0;
    font-size:20px;
    color:white;
    z-index:9999999;
}

JavaScript

$('#myContainer').multiscroll({
   
    sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE'],
    menu: false,

    afterLoad: function(anchorLink, index) {
        if (index == 1)
            $('.hello').fadeOut('slow');
        else
            $('.hello').fadeIn('slow');
    }
});