Как сделать текст как на диодном табло? [закрыт]

122
25 октября 2019, 06:20

Как сделать анимированный текст, чтоб выглядел как на диодном табло на черном фоне?

Answer 1

Когда-то мне попадался пример реализации данной задачи, упрощю вам поиск.
Урезанный вариант кода, под поставленную задачу:

jQuery(function(){ 
    jQuery('input').keyup(function(){ jQuery(this).next().find('.line_text').html(this.value)}).keyup(); 
})
.container{ 
    width:500px; 
    margin: 0 auto; 
  } 
  input{ 
    test-align:center; 
    width:500px; 
    height:24px; 
    font-size:17px; 
    margin-top:50px; 
    text-align:center; 
  } 
 
  .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(https://html5.by/wp-content/uploads/2012/10/led_bg.png); 
  } 
 
  .line .line_text{ 
    width:100%; 
    height:100%; 
    position:absolute; 
    z-index: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%;} 
  } 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<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> 
</div>

Источник

READ ALSO
jQuery mmenu проблема

jQuery mmenu проблема

Буду очень благодарен если кто-нибудь поможет с этимСделал всё точно так, как было показано на сайте

153
Кто-то пробовал использовать lightbox2 с babel?

Кто-то пробовал использовать lightbox2 с babel?

Столкнулся с такой проблемой, что при подключении компилятор babeljs к своему таскраннеру, консоль выбивает ошибку:

117
Метод toggle() работает как fadeIn()

Метод toggle() работает как fadeIn()

Подскажите, есть код:

137
System.ObjectDisposedException используя Using

System.ObjectDisposedException используя Using

Интересная ситуация, кто объяснит такой феномен, используя Using для реализации Idisposable

137