Z-Index Scroller

by kthornbloom

HTML

<div class="serial-gallery-wrap">


<div class="serial-gallery">
  <div class="serial-gallery__card">
    I'll make it look better
  </div>
  <div class="serial-gallery__card">
    don't worry...
  </div>
  <div class="serial-gallery__card">
    it's kinda working
  </div>
  <div class="serial-gallery__card">
    Hey Austin...
  </div>
</div>

</div>

SCSS

.serial-gallery {
  width: 300px;
  position: relative;
  text-align: right;
  margin: 0 auto;
  
  &-wrap {
    background: #222;
    padding: 1em;
    overflow: hidden;
  }
  
  &__card {
    background: #ccc;
    border: 1px solid blue;
    width: calc(100% - 60px);
    padding-top: 100%; 
    position: absolute;
    top: 0;
    left:0;
    text-align: center;
    transform: scale(.95);
    font-weight: bold;
    font-family: sans-serif;
    
    &:last-of-type {
        z-index: 10;
        transform: scale(1);
        box-shadow: 0 4px 10px #000;
        position: relative;
    }
  }
  &__item:nth-child(1){
    position: relative;
    display: inline-block;
  }
  &__item:nth-child(2){
    right: 20px;
  }
  &__item:nth-child(3){
    right: 40px;
  }
  &__item:nth-child(4){
    right: 60px;
  }
}

.anim .serial-gallery__card {
  transition: .5s;
}

JavaScript

const serialgal = document.querySelector('.serial-gallery-wrap');
var mouseDown = 0,
    initx = 0;

document.body.onmousedown = function() { mouseDown = 1;}
document.body.onmouseup = function() { mouseDown = 0;}

serialgal.addEventListener('mousedown', function(e){
  e.preventDefault();
	initx = e.clientX;
})

serialgal.addEventListener('touchstart', function(e){
	e.preventDefault();
	initx = e.touches[0].clientX;
})

serialgal.addEventListener('mousemove', function(e){
	e.preventDefault(e);
	drag(e, false);
})

serialgal.addEventListener('touchmove', function(e){
	e.preventDefault(e);
	drag(e, true);
})

serialgal.addEventListener('mouseup', function(e){
	e.preventDefault(e);
	endDrag(e);
})

serialgal.addEventListener('touchend', function(e){
	e.preventDefault(e);
	endDrag(e);
})

function drag(e, isTouch){
	if(mouseDown == 1 || isTouch){
  	if(isTouch){
    	var newx = e.touches[0].clientX;
    } else {
    	var newx = e.clientX;
    }
    console.log(newx+' '+initx);
  	var diff = (initx - newx) * -1,
    		firstSlide = document.querySelector('.serial-gallery__card:last-of-type'),
        lastSlide = document.querySelector('.serial-gallery__card:first-of-type');
     if(diff > 0){
        lastSlide.style.left = diff+'px';
     }
     else {
      firstSlide.style.left = diff+'px';
     }
  }
}

function endDrag(e){
	 var firstSlide = document.querySelector('.serial-gallery__card:last-of-type'),
       lastSlide = document.querySelector('.serial-gallery__card:first-of-type'),
   		 firstMoved = parseInt(firstSlide.style.left),
       lastMoved = parseInt(lastSlide.style.left);
       moved = 3;
   if(firstMoved == 0){
   	moved = lastMoved;
   } else {
   	moved = firstMoved;
   }
   
   if(moved < -100){
   		// do some animation stuff
			firstSlide.parentNode.prepend(firstSlide);
      resetCards(firstSlide, lastSlide);
      
   } else if (moved > 100){
   		lastSlide.parentNode.appendChild(lastSlide);
      resetCards(firstSlide, lastSlide);
      
   }...