poleroids

by kthornbloom

HTML

<div class="donate-head">
  <img class="donate-head--photo" src="https://picsum.photos/id/1/200">
  <img class="donate-head--photo" src="https://picsum.photos/id/2/200">
  <img class="donate-head--photo" src="https://picsum.photos/id/3/200">
  <img class="donate-head--photo" src="https://picsum.photos/id/4/200">
  <img class="donate-head--photo" src="https://picsum.photos/id/5/200">
  <img class="donate-head--photo" src="https://picsum.photos/id/6/200">
  <img class="donate-head--photo" src="https://picsum.photos/id/7/200">
  <img class="donate-head--photo" src="https://picsum.photos/id/8/200">
  <img class="donate-head--photo" src="https://picsum.photos/id/9/200">
  <img class="donate-head--photo" src="https://picsum.photos/id/10/200">
  <div class="donate-head--text">
    <h1>Obligatory White Text</h1>
  </div>
</div>

<section>
<button onClick="window.location.reload();">Reload Demo</button>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut deserunt veritatis fuga quis tenetur itaque, aperiam ullam, magnam pariatur quos quisquam excepturi non laboriosam et ab, error blanditiis iure minus.</section>

SCSS

.donate-head {
  height: 300px;
  background: #1E4767;
  margin-bottom: 30px;
  overflow: hidden;
  position: relative;
  img {
    border: 20px solid #fff;
    box-shadow: 0 0 15px 20px rgba(0, 0, 0, 0.09);
    position: absolute;
    top:-100%;
    transform-origin:center;
    transition: top 1s cubic-bezier(0.215, 0.61, 0.355, 1), transform 1s;
    &:hover {
      cursor: zoom-in;
      filter:brightness(1.4);
    }
  }
}

.donate-head--text {
  align-items: center;
  background:radial-gradient(rgba(15, 88, 144, 0.71) 30%, rgba(5, 64, 109, 0.88) 70%);
  display: flex;
  justify-content: center;
  height: 100%;
  pointer-events:none;
  position: absolute;
  width: 100%;
  h1 {
    color: #fff;
    font-family: sans-serif;
    font-size: 2em;
    text-shadow: 0 5px 5px rgba(15, 60, 101, 0.5);
  }
}

.donate-head--photo-zoom {
  // !importants to override inline styles. sorry.
  transform: rotate(0deg) translateX(-50%) translateY(-50%)!important;
  left: 50%!important;
  top: 50%!important;
  z-index: 3000;
  &:hover {
    cursor: zoom-out!important;
    filter:none!important;
  }
}

section {
  padding: 30px;
  line-height: 1.5em;
  font-family: sans-serif;
}

JavaScript

// picks a random number, and then sometimes makes it negative
function randomNum(min,max) {
var num = Math.floor(Math.random()*(max-min+1)+min);
		num *= Math.floor(Math.random()*2) == 1 ? 1 : -1;
    return num
}

// picks a random positive number
function randomNumPos(min,max) {
var num = Math.floor(Math.random()*(max-min+1)+min);
    return num
}

// loop photos, add randomized props
var elements = document.querySelectorAll('.donate-head--photo');
for (var i=0; i<elements.length; i++) {
	var leftPos = randomNumPos('0','60'),
 		  topPos = randomNumPos('0','60'),
  		rotate = randomNum('0','40'),
      delay = i * 1000,
      thisImg = elements[i];
  thisImg.style.left = leftPos+"%";
  thisImg.style.top = topPos+"%";
  thisImg.style.transform = "rotate("+rotate+"deg) translateX(0) translateY(0)";
  thisImg.style.transitionDelay = delay+"ms";
  
  thisImg.addEventListener('click', function(event) {
    if(this.classList.contains('donate-head--photo-zoom')){
    	//this.classList.remove('donate-head--photo-zoom');
      putPhotosBack();
    } else {
    	putPhotosBack();
  		this.style.transitionDelay = "0ms";
      this.style.transition = "all .2s";
    	this.classList.add('donate-head--photo-zoom');
    }
  });
}

function putPhotosBack(){
	var elements = document.querySelectorAll('.donate-head--photo');
	for (var i=0; i<elements.length; i++) {
  	elements[i].classList.remove('donate-head--photo-zoom');
  }
}