Colorful text animation
Fluid and configurable colorful text animation module made with scss. Use it wherever you want but please give credit ;)
In use http://hendrysadrak.com
A Pen by Hendry Sadrak on CodePen.
Colorful text animation
Fluid and configurable colorful text animation module made with scss. Use it wherever you want but please give credit ;)
In use http://hendrysadrak.com
A Pen by Hendry Sadrak on CodePen.
<div class="container"> | |
<span class="txt anim-text-flow">How are you? Bacon ipsum dolor sit amet.</span> | |
</div> | |
<a target="_blank" href="https://twitter.com/hendrysadrak">@hendrysadrak</a> |
$('.txt').html(function(i, html) { | |
var chars = $.trim(html).split(""); | |
return '<span>' + chars.join('</span><span>') + '</span>'; | |
}); |
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> |
/* | |
* Animation module with all animation code | |
*/ | |
.anim-text-flow, | |
.anim-text-flow-hover:hover { | |
/* | |
* Animation variables | |
*/ | |
$animationSteps: 20; | |
$animationDuration: 50; | |
$animationElement: span; | |
$animationElementsCount: 100; | |
$delayBetweenLetters: 0.2; | |
/* | |
* Elements settings | |
*/ | |
#{$animationElement} { | |
animation-name: anim-text-flow-keys; | |
animation-duration: #{$animationDuration}s; | |
animation-iteration-count: infinite; | |
animation-direction: alternate; | |
animation-fill-mode: forwards; | |
} | |
/* | |
* Keyframe loop | |
*/ | |
@keyframes anim-text-flow-keys { | |
@for $i from 0 through $animationSteps { | |
#{percentage($i * (1 / $animationSteps))} { | |
color: hsla(random(365), 60, 60, 1); | |
} | |
} | |
} | |
/* | |
* Element animation delay loop | |
*/ | |
$totalDelayTime: $animationElementsCount * $delayBetweenLetters; | |
@for $i from 1 through $animationElementsCount { | |
#{$animationElement}:nth-of-type(#{$i}) { | |
animation-delay: #{($i * $delayBetweenLetters) - $totalDelayTime}s; | |
} | |
} | |
} | |
//////////////////////////// | |
// DEMO CODE | |
/////////////////////////// | |
body { | |
background-color: #1a1a1a; | |
color: #fefefe; | |
font-family: 'Ubuntu'; | |
text-transform: uppercase; | |
letter-spacing: 0.2em; | |
font-size: 1.3em; | |
line-height: 2; | |
font-weight: 300; | |
text-rendering: optimizeLegibility; | |
text-align: center; | |
} | |
.container { | |
position: absolute; | |
top: 50%; | |
left: 50%; | |
width: 100%; | |
transform: translate(-50%, -50%); | |
} | |
.txt { | |
display: block; | |
} | |
a { | |
text-decoration: none; | |
position: absolute; | |
bottom: 10px; | |
right: 10px; | |
text-align: right; | |
color: #eee; | |
font-size: 15px; | |
line-height: 15px; | |
} | |
@import url(http://fonts.googleapis.com/css?family=Ubuntu:300); |
ok lol verry nice