JSFiddle - React, Tailwind, and code Playground

by eprouver

HTML

<div id="container">
<ul id="r" class="backleft moving">
    
</ul>
<ul id="g" class="backright moving">
    
</ul>
<ul id="b" class="center moving">
    
</ul>

</div>


<button id="rbutton">One</button>
<button id="gbutton">Two</button>
<button id="bbutton">Three</button>

CSS

#container{
width:100%;
    height:300px;
    position:relative;
    overflow:hidden;
}

#r, #g, #b{
width:95px;
height: 1000px;
position:absolute;
    line-height:0em;
    -webkit-transform-origin: 0 0;
    -webkit-transition:all .5s ease;
    background-size:100% 20% !important;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
}


#r{
background: url(http://geneinfosite.com/images/Twitter10e26a.jpg);
    background-size:contain;
}

#g{
background: url(http://geneinfosite.com/images/Twitter10e26a.jpg);
    background-size:contain;
}

#b{
background: url(http://geneinfosite.com/images/Twitter10e26a.jpg);
    background-size:contain;
}

.backleft{
    
    -webkit-transform: translate3d(0px, 0px, 0) scale(0.8);
}

.backright{
    
    -webkit-transform:translate3d(200px, 0px, 0) scale(0.8);
}

.center{
    -webkit-transform:translate3d(100px, 0px, 0) scale(1.2);
z-index: 30;
    margin-left: -20px;
    
}

.moving{
-webkit-animation: moving 60s infinite linear;
}

@-webkit-keyframes moving {
  0%   { background-position: 0 0; }
  100% { background-position: 0 -100%; }
}

JavaScript

$('#rbutton').on('click', function() {
    $('#r,#g,#b').removeClass('center backleft backright');
    $('#r').addClass('center');
    $('#b').addClass('backright');
    $('#g').addClass('backleft');
});

$('#gbutton').on('click', function() {
    $('#r,#g,#b').removeClass('center backleft backright');
    $('#g').addClass('center');
    $('#r').addClass('backright');
    $('#b').addClass('backleft');
});

$('#bbutton').on('click', function() {
    $('#r,#g,#b').removeClass('center backleft backright');
    $('#b').addClass('center');
    $('#g').addClass('backright');
    $('#r').addClass('backleft');
});