body {
margin: 20px;
font-family: 'Lato';
font-weight: 300;
text-align: center;
}
h1 {
font-size: 3em;
font-weight: 900;
}
h1 .earth {
color: lightgreen;
text-shadow: 2px 2px 0 black, -2px -2px 0 black;
}
h1 .water {
color: lightblue;
text-shadow: 2px 2px 0 black, -2px -2px 0 black;
}
button {
background: wheat;
border: 1px solid black;
font-family: 'Lato';
border-radius: 5px;
padding: 8px;
margin: 20px 0;
outline: none;
cursor: pointer;
}
var heading = document.querySelector("h1");
var startButton = document.querySelector(".start");
var animateHeading = KUTE.to(
heading,
{ text: '70% SURFACE OF <span class="earth">EARTH</span> IS COVERED WITH <span class="water">WATER</span>.' },
{ duration: 10000, textChars: 'upper' }
);
startButton.addEventListener(
"click",
function() {
animateHeading.start();
},
false
);