Image Gal

by kthornbloom

HTML

<div class="pic-jumble">
  <div class="pic-jumble__pile">
  

  <img src="https://picsum.photos/id/234/300/300" alt="" data-title="Luthiery" data-text="A6 super neato description goes here about this thing. Cool? Cool.">
  <img src="https://picsum.photos/id/237/300/300" alt="" data-title="3D Printing" data-text="A5 super neato description goes here about this thing. Cool? Cool.">
  <img src="https://picsum.photos/id/236/300/300" alt="" data-title="Code Stuff" data-text="A4 super neato description goes here about this thing. Cool? Cool.">
  <img src="https://picsum.photos/id/233/300/300" alt="" data-title="Guitaring" data-text="A3 super neato description goes here about this thing. Cool? Cool.">
  <img src="https://picsum.photos/id/232/300/300" alt="" data-title="Baking" data-text="A2 super neato description goes here about this thing. Cool? Cool.">
  <img src="https://picsum.photos/id/231/300/300" alt="" data-title="Woodworking" data-text="A super neato description goes here about this thing. Cool? Cool.">
    </div>
    <a href="#" class="pic-jumble__prev">PREV</a>
    <a href="#" class="pic-jumble__next">next</a>
    <div class="pic-jumble__text">
      <div class="pic-jumble__title">
      </div>
      <div class="pic-jumble__description">
      </div>
    </div>
</div>

SCSS

body {
  background: #222;
}


.pic-jumble {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  
  &__title {
    font-size: 2rem;
  }
  
  &__prev,
  &__next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }
  
  &__prev {
    left: 1rem;
  }
  
  &__next {
    right: 1rem;
  }
  
  &__text {
    position: absolute;
    top: calc(50% + 200px);
    left: 0;
    width: 100%;
    color: #fff;
    text-align: center;
  }
  
  &__pile{
    position: relative;
    width: 300px;
    height: 300px;

    img {
      transform-origin: center;
      box-shadow: 0 1px 4px rgba(0,0,0,.5);
      transition: .2s;
      position: absolute;
      left: 50%;
      top: 50%;
      margin-left: -150px;
      margin-top: -150px;
      filter: brightness(.7);
    }
    
    img:last-of-type {
      filter: brightness(1);
    }

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

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

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

}

.no-transition {
  transition: none;
}

.anim-prev {
  left: -70%!important;
  transform: rotate(-5deg);
}


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

JavaScript

const titleBlock = document.querySelector('.pic-jumble__title'),
			textBlock = document.querySelector('.pic-jumble__description');

function reverseSlides(){
	var firstImg = document.querySelector('.pic-jumble__pile img:first-of-type'),
  	lastImg = document.querySelector('.pic-jumble__pile img:last-of-type');
    
    firstImg.classList.add('anim-prev');
  setTimeout(function(){
		firstImg.classList.add('no-transition');
    firstImg.parentNode.appendChild(firstImg);
    
    setTimeout(function(){
    firstImg.classList.remove('no-transition');
    firstImg.classList.remove('anim-prev'); 
    updateCaption();
    }, 150);
  }, 150);
}


function nextSlides(){
  	var lastImg = document.querySelector('.pic-jumble__pile img: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'); 
    updateCaption();
    }, 150);
  }, 150);
}

function updateCaption() {
	var lastImg = document.querySelector('.pic-jumble__pile img:last-of-type'),
  		lastTitle = lastImg.getAttribute('data-title'),
      lastText = lastImg.getAttribute('data-text');
      
  textBlock.innerHTML = lastText;
  titleBlock.innerHTML = lastTitle;
}

updateCaption();

const next = document.querySelector('.pic-jumble__next');
const prev = document.querySelector('.pic-jumble__prev');

prev.addEventListener('click', function(e){
	e.preventDefault();
	reverseSlides();
});


next.addEventListener('click', function(e){
	e.preventDefault();
	nextSlides();
});