JSFiddle - React, Tailwind, and code Playground

by Umar

HTML

<a id="prev" href="#">Previous</a>
  <a id="next" href="#">Next</a>
  <div id="container"> </div>
  <div id="log">..... </div>

CSS

#log{border:1px dashed red; padding: 10px;}
  #container{
    border: 1px solid green; margin: 0 auto; text-align: center; position: relative;
  }
  
  #next, #prev{padding: 5px; background: #ccc; color: #000; text-decoration: none; margin: 10px;
    display: inline-block; border: 1px solid blue;}
  
  .test{width: 100px; height: 100px; border: 1px solid black; position: absolute;
    opacity: 0.9; -webkit-transform: scale(1.0); left: 160px;
    -webkit-transition: all 0.5s ease-in; -webkit-border-radius: 3px;
    /*-webkit-box-reflect:below 0px 
      -webkit-gradient(linear, left top, left bottom, from(transparent),
      color-stop(0.9, transparent), to(rgba(255, 255, 255, 0.5)));*/
    
  }
  
  .test:hover{
    opacity: 1.0; z-index: 20; 
  }
  
  .t0{
    top: 100px;
  }
  
  .t1{
  
  }
  
  .t2{
  
  }
  
  .t3{
  
  }

JavaScript

var prev = document.getElementById('prev');
var next = document.getElementById('next');
var divs = [];
var log = document.getElementById('log');
var divCount = 5;
var divsOffScreen = 1;
var colours = ['CD3333','EEEEE0','4BB74C','003F87','9F79EE','68228B'];
for(var i=0; i<divCount; i++) {
  var div = document.createElement('div');
  divs.push(div);
  divs[i].setAttribute('class', 'test t'+i);
  divs[i].style.zIndex = i;
  divs[i].style.backgroundColor = '#'+colours[i];
  divs[i].style.top = 100+i*50;
  divs[i].style.webkitTransform = 'scale(1.'+i+')';
  document.getElementById('container').appendChild(divs[i]);  
}

prev.addEventListener('click', shiftDivsBackwards, false);
next.addEventListener('click', shiftDivsForwards, false);

function shiftDivsForwards() {
  var sign = true;
  var focussedDiv = divs[divCount-divsOffScreen];
  var newScale = extractScale(focussedDiv.style.webkitTransform) + 1.5;
  focussedDiv.style.webkitTransform = 'scale('+ newScale +')';
  focussedDiv.style.opacity = 0.0;
  focussedDiv.style.top = parseInt(focussedDiv.style.top) + 80;  
    for(var i=0; i<divs.length; i++) {
      divs[i].style.top = parseInt(divs[i].style.top) + 50;
    }
  divsOffScreen++;
}

function shiftDivsBackwards() {
  var focussedDiv = divs[divCount-divsOffScreen+1];
  var newScale = extractScale(focussedDiv.style.webkitTransform) - 1.5;
  focussedDiv.style.webkitTransform = 'scale('+ newScale +')';
  focussedDiv.style.opacity = 0.9;
  focussedDiv.style.top = parseInt(focussedDiv.style.top) - 80;
    for(var i=0; i<divs.length; i++) {
      divs[i].style.top = parseInt(divs[i].style.top) - 50;
    }
  divsOffScreen--;
}

function extractScale(str) {
  return parseFloat(str.replace(/[a-z]|[\(]|[\)]/gi,'')); 
}