Adobe is Coming! (banner)

eCampus

by Vikram Deshmukh

HTML

<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<link rel="stylesheet" href="https://daneden.github.io/animate.css/animate.min.css">
<script src="https://fonts.googleapis.com/css?family=PT+Sans+Narrow:700"></script>
<div id="box1" data-delay="1200">
  <span>Adobe</span>
</div>
<div id="box2" data-delay="2400">
  <span>is</span>
</div>
<div id="box3" data-delay="3600">
  <span>coming</span>
</div>
<div id="separator"></div>
<div id="block1" data-delay="1200">
  <span>Adobe</span>
</div>
<div id="block2" data-delay="2400">
  <span>is</span>
</div>
<div id="block3" data-delay="3600">
  <span>coming</span>
</div>

CSS

body {
  background-color: black;
}

body, body * {
  font-family: 'PT Sans Narrow', sans-serif;
}

#separator  {
  width: 400px;
  height: 100px;
}
div[id^='box'], div[id^='block'] {
  display: inline-block;
  width: 200px;
  height: 200px;
  text-align: center;
  line-height: 200px;
  font-size: 3em;
  font-weight: bold;
  margin-right: 10px;
  margin-bottom: 10px;
  -vendor-animation-duration: 10s;
  -vendor-animation-delay: 5s;
  -vendor-animation-iteration-count: infinite;
  -webkit-animation-duration: 8s;
  -moz-animation-duration: 8;
  -ms-transition-animation-duration: 8s;
}
div[id^='box'] {
  background-color: #ff3232;
  color: white;
}

div[id^='block'] {
  color: #ff3232;
  background-color: white;
}

JavaScript

function testAnim(target) {
  x = 'fadeIn';
  $(target).removeClass().addClass('animated '+x).one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function() {
    $(this).removeClass();
  });
}

$('div[id^="block"], div[id^="box"]').each(function(elem){
	setTimeout(function(target) {
    setInterval(testAnim, 3000, target);
  }, $(this).data("delay"), $(this).find("span"));
});