Randomly animated LogoType?
A Pen by dain blodorn on CodePen.
Randomly animated LogoType?
A Pen by dain blodorn on CodePen.
#db13 | |
%img#d.animated( src="http://db13.us/files/imgs/db13-split/d.svg") | |
%img#b.animated( src="http://db13.us/files/imgs/db13-split/b.svg") | |
%img#one.animated( src="http://db13.us/files/imgs/db13-split/1.svg") | |
%img#three.animated( src="http://db13.us/files/imgs/db13-split/3.svg") | |
%img#dot.animated( src="http://db13.us/files/imgs/db13-split/dot.svg") | |
%img#u.animated( src="http://db13.us/files/imgs/db13-split/u.svg") | |
%img#s.animated( src="http://db13.us/files/imgs/db13-split/s.svg") |
// VARIABLES | |
// Elements | |
var d = document.getElementById('d'), | |
b = document.getElementById('b'), | |
one = document.getElementById('one'), | |
three = document.getElementById('three'), | |
dot = document.getElementById('dot'), | |
u = document.getElementById('u'), | |
s = document.getElementById('s'); | |
// Animation Classes | |
var AnimationClass = [ | |
'bounce', | |
'shake', | |
'wobble', | |
'tada', | |
'pulse', | |
'bounceInUp', | |
'hinge', | |
'rubberBand', | |
'headShake' | |
]; | |
function setD() { | |
var dclass = AnimationClass[Math.floor(Math.random() * AnimationClass.length)]; | |
classie.toggle( b, dclass ); | |
} | |
function setB() { | |
var dclass = AnimationClass[Math.floor(Math.random() * AnimationClass.length)]; | |
classie.toggle( one, dclass ); | |
} | |
function setOne() { | |
var dclass = AnimationClass[Math.floor(Math.random() * AnimationClass.length)]; | |
classie.toggle( three, dclass ); | |
} | |
function setThree() { | |
var dclass = AnimationClass[Math.floor(Math.random() * AnimationClass.length)]; | |
classie.toggle( dot, dclass ); | |
} | |
function setDot() { | |
var dclass = AnimationClass[Math.floor(Math.random() * AnimationClass.length)]; | |
classie.toggle( u, dclass ); | |
} | |
function setU() { | |
var dclass = AnimationClass[Math.floor(Math.random() * AnimationClass.length)]; | |
classie.toggle( s, dclass ); | |
} | |
function setS() { | |
var dclass = AnimationClass[Math.floor(Math.random() * AnimationClass.length)]; | |
classie.toggle( d, dclass ); | |
} | |
// Timers | |
// Control | |
var animateLength1 = 4700, | |
animateLength2 = 1000, | |
animateLength3 = 8000, | |
animateLength4 = 9000, | |
animateLength5 = 2000, | |
animateLength6 = 2720, | |
animateLength7 = 5030; | |
// LOGO | |
setInterval(function() { setD(); }, animateLength1); | |
setInterval(function() { setB(); }, animateLength2); | |
setInterval(function() { setOne(); }, animateLength3); | |
setInterval(function() { setThree(); }, animateLength4); | |
setInterval(function() { setDot(); }, animateLength5); | |
setInterval(function() { setU(); }, animateLength6); | |
setInterval(function() { setS(); }, animateLength7); | |
<script src="http://db13.us/files/tools/classie.js"></script> |
body { | |
padding: 20px; | |
background: yellow; | |
} | |
#db13 { | |
height: 100px; | |
width: 430px; | |
position: absolute; | |
top: 0; | |
bottom: 0; | |
left: 0; | |
right: 0; | |
margin: auto; | |
img { | |
margin-left: -5px; | |
} | |
} | |
#d, | |
#b, | |
#one, | |
#three, | |
#dot, | |
#u, | |
#s{ | |
height: 100px; | |
display: inline-block; | |
} |
<link href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.3/animate.min.css" rel="stylesheet" /> |