LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code
2
5
(scroll to transition)
CSS
#container {
  width: 100%;
  height: 101vh;
}

.instructions {
  position: fixed;
  top: 10px;
  width: 100%;
  text-align: center;
  color: white;
  z-index: 400;
}

.slide {
  width: 100%;
  height: 100vh;
  background: transparent no-repeat center center fixed;
  background-size: cover;
  position: fixed;
  top: 0;
  left: 0;
  overflow: hidden;
  transition: all 1s ease-out !important;
}
.slide.one {
  background-image: url("https://b922bde52f23a8481830-83cb7d8d544f653b52d1a1621f05ea9d.ssl.cf3.rackcdn.com/images/_1920x1296_crop_center-center/Mostar-Bridge-dive-Desktop-v2.jpg");
  z-index: 100;
}
.slide.two {
  background-image: url("https://b922bde52f23a8481830-83cb7d8d544f653b52d1a1621f05ea9d.ssl.cf3.rackcdn.com/images/_1920x1296_crop_center-center/Palouse_Portland-desktop_v2.jpg");
  z-index: -1;
}
.slide.transition {
  transition: all 1s ease-out;
  top: -100%;
}

.mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #2f407c;
  opacity: 0;
  z-index: 100;
  transition: all 1s ease-out;
}
.mask.active {
  opacity: .9;
}
.mask.transition {
  top: -100%;
}

.numbers {
  display: block;
  position: fixed;
  width: 100%;
  height: 100%;
  margin-left: -60px;
  font-size: 200px;
  z-index: 100;
  line-height: 100vh;
  text-align: center;
  font-weight: 900;
  transition: all 1.2s ease-in-out, opacity .5s ease-out;
  background: transparent url("https://b922bde52f23a8481830-83cb7d8d544f653b52d1a1621f05ea9d.ssl.cf3.rackcdn.com/images/_1920x1296_crop_center-center/Palouse_Portland-desktop_v2.jpg") no-repeat center center fixed;
  background-size: cover;
  color: white;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  z-index: 300;
  Padding-top: 50%;
  opacity: 0;
}
.numbers:nth-of-type(2) {
  margin-left: 60px !important;
  transition: all 1.8s ease-in-out, opacity .5s ease-out;
}
.numbers.down {
  background-image: url("https://b922bde52f23a8481830-83cb7d8d544f653b52d1a1621f05ea9d.ssl.cf3.rackcdn.com/images/_1920x1296_crop_center-center/Mostar-Bridge-dive-Desktop-v2.jpg");
}
.numbers.active {
  Padding-top: 0;
  opacity: 1;
}
JS
// Should properly scope this
// should put proper checking on state. Ah well

window.onload= function(){
  var mc = new Hammer(document.querySelector('#container'), {});

  var pannedDown = false,
      pannedUp = false,
      lastScroll = 0;
  
  var mask = document.querySelector('.mask'),
      theNumbers = document.querySelectorAll('.numbers'),
      numbers = theNumbers[0],
        numbers2 = theNumbers[1],
      scene1 = document.querySelector(".one");

  window.onscroll = function(){
    var newScroll = window.scrollY;
    if(newScroll > lastScroll){
      panDown();
    }
    if(newScroll < lastScroll){
      panUp();
    }
    lastScroll = newScroll;
  }

  const panDown = ()=>{
    if(pannedDown) return false;
    pannedDown = true;
    //console.log(pannedDown)
    numbers.className = "numbers active"
    numbers2.className = "numbers active"
    setTimeout(()=>{
    mask.className = "mask active";}, 800);
    setTimeout(()=>{
      //mask.className = "mask active transition"
      scene1.className = "slide one transition";
      //numbers.className = "numbers";
    pannedUp = false;
    
    }, 1800);
  }
  
  const panUp = ()=>{
    if(pannedUp || !pannedDown) return false;
    pannedUp = true;
    numbers.className="numbers active down"
    numbers2.className="numbers active down"

    scene1.className="slide one"
    setTimeout(()=>{
      mask.className = "mask active";
      numbers.className="numbers down"; 
    numbers2.className="numbers down"

    }, 1000);
    setTimeout(()=>{
      mask.className="mask";
      pannedDown = false;
    }, 1600)
  }
  
  
}
Host Instantly Drag and Drop Website Builder

 

Description

Saw KLM do this and a million other cool things on one of their sites. Figured I'd take a stab at it.
Term
Mon, 11/27/2017 - 22:09

Related Codes

Pen ID
Pen ID
Pen ID