Бегущая строка с эффектом светодиодной панели (css3 animation)

Как-то раз появилась идея сделать эмуляцию светодиодной панели с помощью CSS animation. Первое, что пришло на ум, было найти подходящий ttf шрифт (точечный или эмуляцию того, что используется в электронных часах) и собственно пустить его в циклическую линейную анимацию по горизонтали. Но беды с этими шрифтами заключаются в том, что используемый язык будет ограничен только заданным набором символов (общая беда для всех кастомных веб шрифтов), а также очень сложно сэмулировать светодиоды, которые в данный момент не активны. Сейчас попробую объяснить. На иллюстрации к статье представлена эмуляция равномерной сетки из светодиодов. В каждый момент времени, часть из них ярко-зеленая (эффект горящего светодиода), а другая часть темно-зеленая (эффект погасшего светодиода). Таким образом, создается нужный рисунок в реальных панелях. С помощью точечного шрифта воссоздать такой же эффект практически невозможно, поскольку шрифты не строятся таким образом, дабы все их точки соответствовали точной сетке. Поэтому в голову пришла идея положить сетку поверх движущегося текста Вот что из этого получилось:

Led panel Хотелось бы услышать Ваши отзывы в комментариях. По-моему, первый вариант с движущимся текстом смотрится неплохо. Второй — хуже, а третий — просто побаловаться хотел :) . Из моего опыта: если будете делать что-то подобное, используйте близкие к реальным цвета погашенного и активного светодиода (фон и цвет текста соответственно) и заботьтесь о том, чтобы сетка была не слишком крупная и не слишком мелкая. В моем случае сетка — это повторяющийся фон, состоящий из таких png -> |

|

HTML (body)

<div class="container">
  <input placeholder = "type here" value="H T M L 5 B Y">
  <div class="line" id="l1">
    <div class="line_text"></div>
    <div class="line_cover"></div>
  </div>
  <input placeholder = "type here" value="EUR 5:0 USA">
  <div class="line" id="l2">
    <div class="line_text"></div>
    <div class="line_cover"></div>
  </div>
  <input placeholder = "type DISCO here!!!" value="">
  <div class="line" id="l3">
    <div class="line_text"></div>
    <div class="line_cover"></div>
  </div>
</div>

JS (head)

<script>
  jQuery(function(){
    jQuery('input').keyup(function(){ jQuery(this).next().find('.line_text').html(this.value)}).keyup();
  })
</script>

CSS (head)

<style>
  html, body {
    margin: 0px;
    padding:30px 0;
    width:100%;
    height:100%;
    font-family: Arial;
    text-align:center;
  }

  body{
    background:url(webdoc.png);
  }

  .container{
    width:500px;
    margin: 0 auto;
  }

  input{
    test-align:center;
    width:500px;
    height:24px;
    font-size:17px;
    margin-top:50px;
    text-align:center;
  }

  /****** Lines *******/

  .line {
    overflow:hidden;
    width:100%;
    border:2px solid #dddddd;
    box-shadow:0px 5px 5px 3px rgba(0,0,0,0.3);
    display:block;
    margin-top:10px;
    border-radius:2px;
    position:relative;
  }

  .line .line_cover{
    width:100%;
    height:100%;
    position:absolute;
    z-index:2;
    background:url(bg.png);
  }

  .line .line_text{
    width:100%;
    height:100%;
    position:absolute;
    z-index:1;
  }

  /****** Line 1 *******/

  #l1.line{
    height:70px;
    background:rgb(50,80,50);
  }

  #l1.line .line_text{
    font-size:60px;
    font-weight:bold;
    color:#00ff00;
    -webkit-animation: l1_animation 10s linear infinite;
    -moz-animation: l1_animation 10s linear infinite;
  }

  @-webkit-keyframes l1_animation {
      0%{left:100%;}
      100%{left:-100%;}
  }
  @-moz-keyframes l1_animation {
      0%{left:100%;}
      100%{left:-100%;}
  }

  /****** Line 2 *******/  

  #l2.line{
    height:70px;
    background:rgb(90,60,50);
  }

  #l2.line .line_text{
    font-size:60px;;
    position:absolute;
    color:#ffb400;
    font-weight:bold;
    -webkit-animation: l2_animation 5s linear infinite;
    -moz-animation: l2_animation 5s linear infinite;
  }

  @-webkit-keyframes l2_animation {
    0%   { opacity: 0; }
    50% { opacity: 1; }
    100% { opacity: 0; }
  }   

  @-moz-keyframes l2_animation {
    0%   { opacity: 0; }
    50% { opacity: 1; }
    100% { opacity: 0; }
  }     

  /****** Line 3 *******/ 

  #l3.line{
    height:70px;
    background:rgb(90,90,90);
  }

  #l3.line .line_text{
    font-size:60px;;
    position:absolute;
    color:#ffb400;
    font-weight:bold;
    font-family:"Trebuchet MS", Helvetica, sans-serif;
    -webkit-animation: l3_animation 5s linear infinite;
    -moz-animation: l3_animation 5s linear infinite;
  }

  @-webkit-keyframes l3_animation {
    0%    {color: rgb(0,0,255); }
    20%   {color: rgb(0,255,255); }
    40%   {color: rgb(255,0,0); }
    60%   {color: rgb(255,255,0); }
    80%   {color: rgb(255,255,255); }
    100%  {color: rgb(0,0,255); }
  }    

  @-moz-keyframes l3_animation {
    0%    {color: rgb(0,0,255); }
    20%   {color: rgb(0,255,255); }
    40%   {color: rgb(255,0,0); }
    60%   {color: rgb(255,255,0); }
    80%   {color: rgb(255,255,255); }
    100%  {color: rgb(0,0,255); }
  }    

</style>

PDF и версия для печати