Knockout Text Transition

index.jade

#container
  .slide.one
     .numbers 2
     .numbers 5
     .mask
  .slide.two
  
.instructions (scroll to transition)

knockout-text-transition.markdown

Knockout Text Transition

Saw KLM do this and a million other cool things on one of their sites. Figured I'd take a stab at it.

A Pen by Eric Brewer on CodePen.

License.

script.babel

// 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)
  }
  
  
}

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script>

style.scss

$url1:'https://b922bde52f23a8481830-83cb7d8d544f653b52d1a1621f05ea9d.ssl.cf3.rackcdn.com/images/_1920x1296_crop_center-center/Mostar-Bridge-dive-Desktop-v2.jpg';
//$url2:'https://b922bde52f23a8481830-83cb7d8d544f653b52d1a1621f05ea9d.ssl.cf3.rackcdn.com/images/_1920x1296_crop_top-center/Skellig-Michael-Desktop-1.jpg';
$url2:'https://b922bde52f23a8481830-83cb7d8d544f653b52d1a1621f05ea9d.ssl.cf3.rackcdn.com/images/_1920x1296_crop_center-center/Palouse_Portland-desktop_v2.jpg';

$z0:-1;
$z1:100;
$z2:200;
$z3:300;
$z4: 400;

#container{
  width:100%;
  height:101vh;
}

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

.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;
  
  &.one{
    background-image:url($url1);
    z-index:$z1;
  }
  &.two{
    background-image:url($url2);
    z-index:$z0;
  }
  &.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:$z1;
  transition:all 1s ease-out;
  
  &.active{
    opacity:.9;
  }
  &.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($url2) no-repeat center center fixed;
  background-size:cover;
  color:white;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  z-index:$z3;
  Padding-top:50%;
  opacity:0;
  
  &:nth-of-type(2){
    margin-left:60px!important;
  transition:all 1.8s ease-in-out, opacity .5s ease-out;
  }
  
  &.down{
    background-image:url($url1);
  }
    
  &.active{
    Padding-top:0;
    opacity:1;
  }
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />