LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

Reflective Photo Wall

byShawn Reisner
CSS
@import url("https://fonts.googleapis.com/css?family=Raleway:100i,400");
@media (min-width: 0px) {
  body {
    -webkit-perspective: 250px;
            perspective: 250px;
  }
}
@media (min-width: 700px) {
  body {
    -webkit-perspective: 500px;
            perspective: 500px;
  }
}
@media (min-width: 1200px) {
  body {
    -webkit-perspective: 1000px;
            perspective: 1000px;
  }
}
@media (min-width: 1600px) {
  body {
    -webkit-perspective: 2000px;
            perspective: 2000px;
  }
}
body {
  background: #090909;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  overflow: hidden;
}

.header {
  position: absolute;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  right: 0;
  top: 0;
  color: #CCC;
  padding: 2em;
  font-family: 'Raleway';
  z-index: 5;
  font-size: 20px;
  letter-spacing: 0.25em;
  text-align: center;
}
.header h1 {
  font-weight: 400;
  font-size: 1em;
  margin: 0 0 5px 0;
  text-transform: uppercase;
}
.header span {
  padding: 0.25em;
  font-size: 0.75em;
  font-style: italic;
  text-transform: lowercase;
}

.social {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-top: 0.5em;
}
.social a {
  position: relative;
  width: 1.5em;
  height: 1.5em;
  margin: 0px 0.75em;
}
.social a img {
  width: 100%;
  height: 100%;
}

#wall {
  position: relative;
  -webkit-transform-origin: left center;
          transform-origin: left center;
  -webkit-transform: rotateY(45deg);
          transform: rotateY(45deg);
  width: 100%;
  height: 100%;
  -webkit-animation: 10s linear move;
          animation: 10s linear move;
}
#wall .row {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 250px;
  margin-bottom: 10px;
}
#wall .row img {
  height: 100%;
  margin: 5px;
}
#wall .row .frame {
  position: relative;
  height: 100%;
}
#wall .row .frame .reflection {
  position: absolute;
  height: 100%;
  -webkit-transform: rotateX(180deg) translateY(-10px);
          transform: rotateX(180deg) translateY(-10px);
  opacity: 0.25;
}
#wall .row .frame::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: -webkit-linear-gradient(#090909 75%, transparent);
  background: linear-gradient(#090909 75%, transparent);
  -webkit-transform-origin: bottom center;
          transform-origin: bottom center;
  -webkit-transform: rotateX(180deg) translateY(-20px);
          transform: rotateX(180deg) translateY(-20px);
}
JS
const NUM_ROWS = 3;
const NUM_IMAGES = 100;
const IMAGES = [];
for(let i = 0; i < NUM_IMAGES; i++) {
  let width = (Math.floor(Math.random() * 3) + 2) * 100;
  let height = (Math.floor(Math.random() * 3) + 2) * 100;
  IMAGES.push(`http://unsplash.it/${width}/${height}`);
}

let rows = [];
for(let i = 0; i < NUM_ROWS; i++) {
  let row = document.createElement('div');
  row.classList.add('row');
  rows.push(row);
}

let wall = document.getElementById('wall');
for(let i = 0; i < IMAGES.length; i++) {
  let index = i % rows.length;
  let row = rows[index];
  let onBottomRow = index === rows.length - 1;
  if(onBottomRow) {
    let frame = document.createElement('div');
    frame.classList.add('frame');
    frame.innerHTML = `
      
      
`; row.appendChild(frame); } else { let img = document.createElement('img'); img.src = IMAGES[i]; row.appendChild(img); } } rows.forEach((row) => { wall.appendChild(row); }); let debounce = (func, wait, immediate) => { var timeout; return function() { var context = this, args = arguments; var later = function() { timeout = null; if (!immediate) func.apply(context, args); }; var callNow = immediate && !timeout; clearTimeout(timeout); timeout = setTimeout(later, wait); if (callNow) func.apply(context, args); }; }; let scrollPosition = 0; let scrollWall = debounce((event) => { scrollPosition -= event.deltaY; wall.style.transform = `rotateY(45deg) translateX(${scrollPosition}px)`; }, 10); window.addEventListener('wheel', scrollWall);
Host Instantly Drag and Drop Website Builder

 

Term
Wed, 11/29/2017 - 11:19

Related Codes

Pen ID
Pen ID
Pen ID