<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-2c7831bb44f98c1391d6a4ffda0e1fd302503391ca806e7fcc7b9b87197aec26.js"></script>
<title>Wow Animate text animation</title>
<link rel='stylesheet' href='https://s3-us-west-2.amazonaws.com/s.cdpn.io/323909/animate.css'>
<style>
@font-face {
font-family: 'Dimbo';
src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/323909/Dimbo_Regular.ttf');
}
body {
text-align: center;
font-family: 'Dimbo';
background: #000;
}
.wrapper {
overflow: hidden;
}
.scrollDown {
font-size: 40px;
min-height: 80vh;
-webkit-animation: colorCycle 7s infinite ease-in-out;
animation: colorCycle 7s infinite ease-in-out;
}
.scrollDown:before,
.scrollDown:after {
content: "\2193 \2193";
-webkit-animation: flash 1.5s 6;
animation: flash 1.5s 6;
}
.word {
min-height: 60vh;
}
.word .letter {
display: inline-block;
margin: 0 0.2vw;
font-size: 4vw;
}
.word .letter.color0 {
color: #F94816;
text-shadow: 0.2vw 0.2vw 0 #731c03;
}
.word .letter.color1 {
color: #E9D443;
text-shadow: 0.2vw 0.2vw 0 #84750f;
}
.word .letter.color2 {
color: #FD91F7;
text-shadow: 0.2vw 0.2vw 0 #f104e3;
}
.word .letter.color3 {
color: #28963F;
text-shadow: 0.2vw 0.2vw 0 #081d0c;
}
.word .letter.color4 {
color: #E43485;
text-shadow: 0.2vw 0.2vw 0 #700f3c;
}
.word .letter.color5 {
color: #A2E4F2;
text-shadow: 0.2vw 0.2vw 0 #1fbbdc;
}
.word .letter.color6 {
color: #FA476E;
text-shadow: 0.2vw 0.2vw 0 #a40427;
}
.wow {
visibility: hidden;
min-height: 10vh;
display: block;
margin: 0 auto;
}
@-webkit-keyframes colorCycle {
0% {
color: #F94816;
}
14.286% {
color: #E9D443;
}
28.572% {
color: #FD91F7;
}
42.858% {
color: #28963F;
}
57.144% {
color: #E43485;
}
71.43% {
color: #A2E4F2;
}
85.716% {
color: #FA476E;
}
100% {
color: #F94816;
}
}
@keyframes colorCycle {
0% {
color: #F94816;
}
14.286% {
color: #E9D443;
}
28.572% {
color: #FD91F7;
}
42.858% {
color: #28963F;
}
57.144% {
color: #E43485;
}
71.43% {
color: #A2E4F2;
}
85.716% {
color: #FA476E;
}
100% {
color: #F94816;
}
}
</style>
</head>
<body translate="no">
<div class="wrapper">
<div class="scrollDown">SCROLL DOWN</div>
<div class="placeholder"></div>
</div>
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/323909/wow.js'></script>
<script id="rendered-js" >
/*
Animated text using
Animate.css https://daneden.github.io/animate.css/
Wow.js http://mynameismatthieu.com/WOW/
View in live mode if on an iPad
*/
new WOW({
offset: 200 }).
init();
var animateCss = [
"bounce", "flash", "pulse", "rubberBand", "shake", "swing", "tada", "wobble", "jello",
"bounceIn", "bounceInDown", "bounceInLeft", "bounceInRight", "bounceInUp",
"fadeIn", "fadeInDown", "fadeInDownBig", "fadeInLeft", "fadeInLeftBig", "fadeInRight", "fadeInRightBig", "fadeInUp", "fadeInUpBig", "flip", "flipInX", "flipInY",
"lightSpeedIn", "rotateIn", "rotateInDownLeft", "rotateInDownRight", "rotateInUpLeft", "rotateInUpRight",
"slideInUp", "slideInDown", "slideInLeft", "slideInRight",
"zoomIn", "zoomInDown", "zoomInLeft", "zoomInRight", "zoomInUp",
"rollIn"];
var placeholder = $(".placeholder");
var colorCounter = 0;
for (i = 0; i < animateCss.length; i++) {if (window.CP.shouldStopExecution(0)) break;
var word = "<div class=\"word\"></div>";
$(word).appendTo(placeholder);
for (j = 0; j < animateCss[i].length; j++) {if (window.CP.shouldStopExecution(1)) break;
var letterDiv = "<div data-wow-delay=\"" + (j * 0.1).toFixed(2) + "s\" class=\"letter wow " + animateCss[i] + " color" + colorCounter % 7 + "\">" + animateCss[i][j] + "</div>";
$(letterDiv).appendTo($(".word").last());
colorCounter++;
}window.CP.exitedLoop(1);
}window.CP.exitedLoop(0);
</script>
</body>
</html>
Comments
Post a Comment