Grievance TV MODE

by kthornbloom

HTML

<div class="board">
<div class="post">i list of grievances is not long enough</div>
<div class="post">h list of grievances is not long enough</div>
<div class="post">g list of grievances is not long enough</div>
<div class="post">f list of grievances is not long enough</div>
<div class="post">e list of grievances is not long enough</div>
<div class="post">d list of grievances is not long enough</div>
<div class="post">c list of grievances is not long enough</div>
<div class="post">b list of grievances is not long enough</div>
<div class="post">a list of grievances is not long enough</div>
</div>

SCSS

body {
  background: #222;
}


.board{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  overflow: hidden;
  max-width: 100%;
  width: 100vw;
  position: absolute;
}

.post {
  font-size: 1.5rem;
  padding: 1rem;
  overflow: hidden;
  transform-origin: center;
  background: #fef9a8;
  width: 300px;
  height: 300px;
  box-shadow: 0 1px 4px rgba(0,0,0,.5);
  transition: .5s;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -150px;
  margin-top: -150px;
  justify-content: center;
  align-items: center;
  display: flex;
  word-break: break-word;
  text-align: center;
}

.post:last-of-type {
  filter: brightness(1);
}

.post:nth-last-child(2){
  transform: rotate(-4deg);
}

.post:nth-last-child(3){
  transform: rotate(2deg);
}

.post:nth-last-child(4){
  transform: rotate(3deg);
}

.no-transition {
  transition: none;
}

.anim-next {
  top: 0%!important;
  transform: rotate(-5deg);
}

JavaScript

function nextSlides(){
  	var lastImg = document.querySelector('.post:last-of-type');
        
    lastImg.classList.add('anim-next');
  setTimeout(function(){
		lastImg.classList.add('no-transition');
    lastImg.parentNode.prepend(lastImg);
    
    setTimeout(function(){
    lastImg.classList.remove('no-transition');
    lastImg.classList.remove('anim-next'); 
    }, 250);
  }, 250);
}



setInterval(function(){
	nextSlides();
}, 2000);