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