LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

Content 1

Content 2

Beware of Dog

Dog timeline percentage complete: 0%

Content 4

CSS
* {
  box-sizing: border-box;
}

body {
  padding: 0;
  margin: 0;
  font-family: "Roboto", sans-serif;
  color: white;
}

.content {
  width: 100%;
  height: 100vh;
  position: relative;
}

.content1 {
  background: slategray;
}
.content2 {
  background: forestgreen;
}
.content3 {
  background: midnightblue;
}
.content4 {
  background: indigo;
}

.dog {
  width: 163px;
  height: 161px;
  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/314556/dog.png");
  position: absolute;
  top: 50%;
  left: 0;
}

h1 {
  padding: 20px;
  margin: 0;
  text-align: center;
  color: white;
}

.percentage {
  position: absolute;
  bottom: 10px;
  left: 10px;
}
JS
TweenLite.defaultEase = Linear.easeNone;
TweenMax.set(".dog", {yPercent:-50, xPercent:-100});
const tween = new TimelineMax({onUpdate:updatePercentage});
const controller = new ScrollMagic.Controller();
const percent = document.querySelector(".percentage span");

tween.to(".dog", 1, {left:"50%", xPercent:-50});
tween.to(".dog", 1, {left:"100%", xPercent:-100}, "+=2");

const scene =	new ScrollMagic.Scene({
			triggerElement: ".pinDiv",
			triggerHook: "onLeave",
			duration: "200%"
		})
		.setPin(".pinDiv")
		.setTween(tween)
		.addIndicators({
      colorTrigger: "white",
			colorStart:"white",
      colorEnd:"white",
		  indent:20,
      name:":The Dog"
    }) 
		.addTo(controller);

function updatePercentage() {
  percent.innerHTML = (tween.progress() *100 ).toFixed();
}
Term
Fri, 01/12/2018 - 16:40

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv