Creative ASCII AT-AT

Creative ASCII AT-AT

Animation, Css, Download Resources, HTML, JavaScript, Website No Comments on Creative ASCII AT-AT
Creative ASCII AT-AT

Star Wars inspired AT-AT personnel carrier, drawn using text with the colours cycled in CSS. A funky effect.



Demo/Download

HTML

<article>
  <pre class="candybox2">           ________
      _,.-Y  |  |  Y-._
  .-~"   ||  |  |  |   "-.
  I" ""=="|" !""! "|"[]""|     _____
  L__  [] |..------|:   _[----I" .-{"-.
 I___|  ..| l______|l_ [__L]_[I_/r(=}=-P
[L______L_[________]______j~  '-=c_]/=-^
 \_I_j.--.\==I|I==_/.--L_]
   [_((==)[`-----"](==)j
      I--I"~~"""~~"I--I
      |[]|         |[]|
      l__j         l__j
      |!!|         |!!|
      |..|         |..|
      ([])         ([])
      ]--[         ]--[
      [_L]         [_L]
     /|..|\       /|..|\
    `=}--{='     `=}--{='
   .-^--r-^-.   .-^--r-^-.
</pre>
  
</article>

CSS

/**
 *
 * Absolute position in the center of the parent element (top, left). 
 *
 */
article {
  position: absolute;
  left: 50%;
  top: 50%;
}

/**
 *
 * Absolute position in the center of the parent element (-50%, -50%). 
 *
 */
article {
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

/**
 *
 * Absolute position at $top and $left. 
 * You can also add value for the $content property. 
 *
 */
/**
 *
 * Include a breakpoint for different screen sizses:
 *
 * small : smart phones & smaller devices
 * medium :  tablets, netbooks
 * large : HD, large screens, beamer
 *
 */
/**
 *
 * Linear gradient with old and new syntax. 
 * bg(to bottom, top, #f00, #00f)
 *
 */
/**
 *
 * Animation 
 *
 */
/**
 *
 * Keyframes
 *
 */
/**
 *
 * Placeholder
 *
 */
.candybox2 {
  font-weight: bold;
}
.candybox2 span:nth-child(13n+1) {
  -moz-animation: candy linear 0.5s infinite forwards -0.03846s;
  -webkit-animation: candy linear 0.5s infinite forwards -0.03846s;
  animation: candy linear 0.5s infinite forwards -0.03846s;
}
.candybox2 span:nth-child(13n+2) {
  -moz-animation: candy linear 0.5s infinite forwards -0.07692s;
  -webkit-animation: candy linear 0.5s infinite forwards -0.07692s;
  animation: candy linear 0.5s infinite forwards -0.07692s;
}
.candybox2 span:nth-child(13n+3) {
  -moz-animation: candy linear 0.5s infinite forwards -0.11538s;
  -webkit-animation: candy linear 0.5s infinite forwards -0.11538s;
  animation: candy linear 0.5s infinite forwards -0.11538s;
}
.candybox2 span:nth-child(13n+4) {
  -moz-animation: candy linear 0.5s infinite forwards -0.15385s;
  -webkit-animation: candy linear 0.5s infinite forwards -0.15385s;
  animation: candy linear 0.5s infinite forwards -0.15385s;
}
.candybox2 span:nth-child(13n+5) {
  -moz-animation: candy linear 0.5s infinite forwards -0.19231s;
  -webkit-animation: candy linear 0.5s infinite forwards -0.19231s;
  animation: candy linear 0.5s infinite forwards -0.19231s;
}
.candybox2 span:nth-child(13n+6) {
  -moz-animation: candy linear 0.5s infinite forwards -0.23077s;
  -webkit-animation: candy linear 0.5s infinite forwards -0.23077s;
  animation: candy linear 0.5s infinite forwards -0.23077s;
}
.candybox2 span:nth-child(13n+7) {
  -moz-animation: candy linear 0.5s infinite forwards -0.26923s;
  -webkit-animation: candy linear 0.5s infinite forwards -0.26923s;
  animation: candy linear 0.5s infinite forwards -0.26923s;
}
.candybox2 span:nth-child(13n+8) {
  -moz-animation: candy linear 0.5s infinite forwards -0.30769s;
  -webkit-animation: candy linear 0.5s infinite forwards -0.30769s;
  animation: candy linear 0.5s infinite forwards -0.30769s;
}
.candybox2 span:nth-child(13n+9) {
  -moz-animation: candy linear 0.5s infinite forwards -0.34615s;
  -webkit-animation: candy linear 0.5s infinite forwards -0.34615s;
  animation: candy linear 0.5s infinite forwards -0.34615s;
}
.candybox2 span:nth-child(13n+10) {
  -moz-animation: candy linear 0.5s infinite forwards -0.38462s;
  -webkit-animation: candy linear 0.5s infinite forwards -0.38462s;
  animation: candy linear 0.5s infinite forwards -0.38462s;
}
.candybox2 span:nth-child(13n+11) {
  -moz-animation: candy linear 0.5s infinite forwards -0.42308s;
  -webkit-animation: candy linear 0.5s infinite forwards -0.42308s;
  animation: candy linear 0.5s infinite forwards -0.42308s;
}
.candybox2 span:nth-child(13n+12) {
  -moz-animation: candy linear 0.5s infinite forwards -0.46154s;
  -webkit-animation: candy linear 0.5s infinite forwards -0.46154s;
  animation: candy linear 0.5s infinite forwards -0.46154s;
}
.candybox2 span:nth-child(13n+13) {
  -moz-animation: candy linear 0.5s infinite forwards -0.5s;
  -webkit-animation: candy linear 0.5s infinite forwards -0.5s;
  animation: candy linear 0.5s infinite forwards -0.5s;
}

@-moz-keyframes candy {
  0% {
    color: #208e4e;
    text-shadow: 0.1em 0 0.1em #2ecc71, 0.15em 0 0.1em #2ecc71;
  }
  7.69231% {
    color: #19703e;
    text-shadow: 0.1em 0 0.1em #27ae60, 0.15em 0 0.1em #27ae60;
  }
  15.38462% {
    color: #aa8a0a;
    text-shadow: 0.1em 0 0.1em #f1c40f, 0.15em 0 0.1em #f1c40f;
  }
  23.07692% {
    color: #b06f09;
    text-shadow: 0.1em 0 0.1em #f39c12, 0.15em 0 0.1em #f39c12;
  }
  30.76923% {
    color: #1d6fa5;
    text-shadow: 0.1em 0 0.1em #3498db, 0.15em 0 0.1em #3498db;
  }
  38.46154% {
    color: #1b557a;
    text-shadow: 0.1em 0 0.1em #2980b9, 0.15em 0 0.1em #2980b9;
  }
  46.15385% {
    color: #bf2718;
    text-shadow: 0.1em 0 0.1em #e74c3c, 0.15em 0 0.1em #e74c3c;
  }
  53.84615% {
    color: #81261d;
    text-shadow: 0.1em 0 0.1em #c0392b, 0.15em 0 0.1em #c0392b;
  }
  61.53846% {
    color: #713b87;
    text-shadow: 0.1em 0 0.1em #9b59b6, 0.15em 0 0.1em #9b59b6;
  }
  69.23077% {
    color: #612e76;
    text-shadow: 0.1em 0 0.1em #8e44ad, 0.15em 0 0.1em #8e44ad;
  }
  76.92308% {
    color: #117964;
    text-shadow: 0.1em 0 0.1em #1abc9c, 0.15em 0 0.1em #1abc9c;
  }
  84.61538% {
    color: #0d5d4d;
    text-shadow: 0.1em 0 0.1em #16a085, 0.15em 0 0.1em #16a085;
  }
  92.30769% {
    color: rgba(217, 217, 217, 0.5);
    text-shadow: 0.1em 0 0.1em rgba(255, 255, 255, 0.5), 0.15em 0 0.1em rgba(255, 255, 255, 0.5);
  }
  100% {
    color: #208e4e;
    text-shadow: 0.1em 0 0.1em #2ecc71, 0.15em 0 0.1em #2ecc71;
  }
}
@-webkit-keyframes candy {
  0% {
    color: #208e4e;
    text-shadow: 0.1em 0 0.1em #2ecc71, 0.15em 0 0.1em #2ecc71;
  }
  7.69231% {
    color: #19703e;
    text-shadow: 0.1em 0 0.1em #27ae60, 0.15em 0 0.1em #27ae60;
  }
  15.38462% {
    color: #aa8a0a;
    text-shadow: 0.1em 0 0.1em #f1c40f, 0.15em 0 0.1em #f1c40f;
  }
  23.07692% {
    color: #b06f09;
    text-shadow: 0.1em 0 0.1em #f39c12, 0.15em 0 0.1em #f39c12;
  }
  30.76923% {
    color: #1d6fa5;
    text-shadow: 0.1em 0 0.1em #3498db, 0.15em 0 0.1em #3498db;
  }
  38.46154% {
    color: #1b557a;
    text-shadow: 0.1em 0 0.1em #2980b9, 0.15em 0 0.1em #2980b9;
  }
  46.15385% {
    color: #bf2718;
    text-shadow: 0.1em 0 0.1em #e74c3c, 0.15em 0 0.1em #e74c3c;
  }
  53.84615% {
    color: #81261d;
    text-shadow: 0.1em 0 0.1em #c0392b, 0.15em 0 0.1em #c0392b;
  }
  61.53846% {
    color: #713b87;
    text-shadow: 0.1em 0 0.1em #9b59b6, 0.15em 0 0.1em #9b59b6;
  }
  69.23077% {
    color: #612e76;
    text-shadow: 0.1em 0 0.1em #8e44ad, 0.15em 0 0.1em #8e44ad;
  }
  76.92308% {
    color: #117964;
    text-shadow: 0.1em 0 0.1em #1abc9c, 0.15em 0 0.1em #1abc9c;
  }
  84.61538% {
    color: #0d5d4d;
    text-shadow: 0.1em 0 0.1em #16a085, 0.15em 0 0.1em #16a085;
  }
  92.30769% {
    color: rgba(217, 217, 217, 0.5);
    text-shadow: 0.1em 0 0.1em rgba(255, 255, 255, 0.5), 0.15em 0 0.1em rgba(255, 255, 255, 0.5);
  }
  100% {
    color: #208e4e;
    text-shadow: 0.1em 0 0.1em #2ecc71, 0.15em 0 0.1em #2ecc71;
  }
}
@keyframes candy {
  0% {
    color: #208e4e;
    text-shadow: 0.1em 0 0.1em #2ecc71, 0.15em 0 0.1em #2ecc71;
  }
  7.69231% {
    color: #19703e;
    text-shadow: 0.1em 0 0.1em #27ae60, 0.15em 0 0.1em #27ae60;
  }
  15.38462% {
    color: #aa8a0a;
    text-shadow: 0.1em 0 0.1em #f1c40f, 0.15em 0 0.1em #f1c40f;
  }
  23.07692% {
    color: #b06f09;
    text-shadow: 0.1em 0 0.1em #f39c12, 0.15em 0 0.1em #f39c12;
  }
  30.76923% {
    color: #1d6fa5;
    text-shadow: 0.1em 0 0.1em #3498db, 0.15em 0 0.1em #3498db;
  }
  38.46154% {
    color: #1b557a;
    text-shadow: 0.1em 0 0.1em #2980b9, 0.15em 0 0.1em #2980b9;
  }
  46.15385% {
    color: #bf2718;
    text-shadow: 0.1em 0 0.1em #e74c3c, 0.15em 0 0.1em #e74c3c;
  }
  53.84615% {
    color: #81261d;
    text-shadow: 0.1em 0 0.1em #c0392b, 0.15em 0 0.1em #c0392b;
  }
  61.53846% {
    color: #713b87;
    text-shadow: 0.1em 0 0.1em #9b59b6, 0.15em 0 0.1em #9b59b6;
  }
  69.23077% {
    color: #612e76;
    text-shadow: 0.1em 0 0.1em #8e44ad, 0.15em 0 0.1em #8e44ad;
  }
  76.92308% {
    color: #117964;
    text-shadow: 0.1em 0 0.1em #1abc9c, 0.15em 0 0.1em #1abc9c;
  }
  84.61538% {
    color: #0d5d4d;
    text-shadow: 0.1em 0 0.1em #16a085, 0.15em 0 0.1em #16a085;
  }
  92.30769% {
    color: rgba(217, 217, 217, 0.5);
    text-shadow: 0.1em 0 0.1em rgba(255, 255, 255, 0.5), 0.15em 0 0.1em rgba(255, 255, 255, 0.5);
  }
  100% {
    color: #208e4e;
    text-shadow: 0.1em 0 0.1em #2ecc71, 0.15em 0 0.1em #2ecc71;
  }
}

JS

/** * * AT-AT * * You should play with $unit-beta. * * "nth-letter"-something is provided by lettering.js * -> every letter is wrapped into a span! * http://letteringjs.com * * * 2013 by Tim Pietrusky * timpietrusky.com *//* Lettering.JS 0.6.1 by Dave Rupert  - http://daverupert.com */(function($){function injector(t,splitter,klass,after){var a=t.text().split(splitter),inject='';if(a.length){$(a).each(function(i,item){inject+='<span class="'+klass+(i+1)+'">'+item+'</span>'+after});t.empty().append(inject)}}var methods={init:function(){return this.each(function(){injector($(this),'','char','')})},words:function(){return this.each(function(){injector($(this),' ','word',' ')})},lines:function(){return this.each(function(){var r="eefec303079ad17405c889e092e105b0";injector($(this).children("br").replaceWith(r).end(),r,'line','')})}};$.fn.lettering=function(method){if(method&&methods[method]){return methods[method].apply(this,[].slice.call(arguments,1))}else if(method==='letters'||!method){return methods.init.apply(this,[].slice.call(arguments,0))}$.error('Method '+method+' does not exist on jQuery.lettering');return this}})(jQuery);  $(".candybox2").lettering();

Author

Related Articles

Leave a comment

Creative Buck ©2016. All Rights Reserved.

Search

Back to Top