Как сделать анимированный текст, чтоб выглядел как на диодном табло на черном фоне?
Когда-то мне попадался пример реализации данной задачи, упрощю вам поиск.
Урезанный вариант кода, под поставленную задачу:
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>
Источник
Айфон мало держит заряд, разбираемся с проблемой вместе с AppLab
Перевод документов на английский язык: Важность и ключевые аспекты
Буду очень благодарен если кто-нибудь поможет с этимСделал всё точно так, как было показано на сайте
Столкнулся с такой проблемой, что при подключении компилятор babeljs к своему таскраннеру, консоль выбивает ошибку:
Интересная ситуация, кто объяснит такой феномен, используя Using для реализации Idisposable