DB13 Animated Logo

DB13 Animated Logo.markdown

DB13 Animated Logo

Randomly animated LogoType?

A Pen by dain blodorn on CodePen.

License.

index.html

#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")

script.js

// 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);

scripts

<script src="http://db13.us/files/tools/classie.js"></script>

style.css

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;
}

styles

<link href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.3/animate.min.css" rel="stylesheet" />