JSFiddle - React, Tailwind, and code Playground

by Johan Muller

HTML

Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some textSome text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some


<div class="toup item1"></div>
<div class="toup item3"></div>
<div class="toup item5"></div>
<div class="toup item7"></div>
<div class="toup item9"></div>
<div class="todown item2"></div>
<div class="todown item4"></div>
<div class="todown item6"></div>
<div class="todown item8"></div>
<div class="todown item10"></div>

CSS

.toup, .todown {
    position: fixed;
    top: 0px;
    width: 10%;
    height: 100%;
    background: #aaa;
    display: none;
}

.item1 { left: 0%; }
.item2 { left: 10%; }
.item3 { left: 20%; }
.item4 { left: 30%; }
.item5 { left: 40%; }
.item6 { left: 50%; }
.item7 { left: 60%; }
.item8 { left: 70%; }
.item9 { left: 80%; }
.item10 { left: 90%; }

JavaScript

$('div').show();

$('.toup').animate({'top':'-100%', 'opacity':'.5'}, 400, function(){ $(this).hide(); });

$('.todown').animate({'top':'200%', 'opacity':'.5'}, 400, function(){ $(this).hide(); });