Skip to content

Instantly share code, notes, and snippets.

@CodeMyUI
Created May 23, 2017
Embed
What would you like to do?
Knockout Text Transition
#container
.slide.one
.numbers 2
.numbers 5
.mask
.slide.two
.instructions (scroll to transition)

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.

// 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)
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script>
$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;
}
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment