Бегущая строка с эффектом светодиодной панели (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>

19 комментариев на “Бегущая строка с эффектом светодиодной панели (css3 animation)
  1. Иван пишет:

    Тема не раскрыта )) Зашел почитать… а тут облом. Результат есть а как сделано нифига непонятно :)

  2. Semyon пишет:

    Прекрасно! Хотелось бы поподробнее узнать про установку на wordpress, не хотите сделать плагин?

  3. Semyon пишет:

    Установить удалось. А как снять ограничение на 14 символов?

  4. Semyon пишет:

    Разобрался, надо просто Non-Breaking Space использовать, тогда не будет ограничения и строчка не обрывается. Спасибо еще раз!

  5. Symba пишет:

    Очень полезная статья! подскажите пожалуйста, каким образом реализовать следующее:

    0% анимации – начало строки в начале div (конец строки находится за пределами div)

    50% анимации – конец строки в конце div (начало строки находится за пределами div)

    100% анимации – начало строки в начале div (конец строки находится за пределами div)

    то есть, если текст длинный, то строка не “бежит” в одну сторону, а по очереди передвигается то в начало, то в конец, таким образом позволяя прочитать себя полностью.
    каким та образом нужно вычислить длину строки и передать это значение в переменную.

  6. Dima пишет:

    В opere и IE не работает….?
    Есть решение?

  7. *Олег пишет:

    Вот подшаманил немного под себя ваше произведение ..
    исходник

    • admin пишет:

      ;) Круто
      Особенно понравился дефолтный текст “Ну и своего текста конечно не забыть прописать ,килограмм на 25 прямо во всю строку браузера “

  8. Эдуард пишет:

    Подскажите, а как можно сделать так, чтобы в бегущей строке отображались заголовки новостей? То есть, перечислялись поочередно :)

  9. Tester пишет:

    Жаль, что в Firefox не работает

  10. Реалист пишет:

    Хреново, что в хтмл5 убрали простой тег бегущей строки. Теперь нужно заморачиваться с этими ява-скриптами

  11. Михаил пишет:

    Помогите! Нужна такая строка в виде HTML кода чтобы встроить на Wix!

Оставить комментарий

Ваш email не будет опубликован. Обязательные поля отмечены *

*

* Copy This Password *

* Type Or Paste Password Here *

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four 
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

For more help see http://daringfireball.net/projects/markdown/syntax

Вы можете использовать это HTMLтеги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Узнавай о новых статьях первым!

Спасибо за лайк в FACEBOOK
Подписывайтесь на новости вконтакте
Последние статьи от html5.by