Создание CSS Marquee CSS / HTML / JS - PullRequest
Новая
       48

Создание CSS Marquee CSS / HTML / JS

2 голосов
/ 17 марта 2020

Мне нужно создать выделение с помощью CSS (JS хорошо). У меня сейчас есть код, но он обрезает текст и не позволяет отображать всю фразу. Я хочу, чтобы он выглядел так, как показано здесь: https://www.balenciaga.com/us, но без паузы при наведении (и без кнопки паузы). Я дизайнер и просто программист ладьи ie, так что для меня это новый мир, но я ценю всю помощь, которую могу получить. Проблема, с которой я столкнулся в своем коде, заключается в том, что он не позволяет отображать весь текст, а также не является бесконечным, где текст всегда виден. Я хочу, чтобы он был на al oop и всегда был виден, как на ссылке выше.

Мой код сейчас: 

.example1 {
 height: 50px;	
 overflow: hidden;
 position: relative;
}
.example1 h5 {
 font-size: 1em;
 color: black;
 position: absolute;
 width: 100%;
 height: 100%;
 margin: 0;
 line-height: 50px;
 text-align: center;
 /* Starting position */
 -moz-transform:translateX(100%);
 -webkit-transform:translateX(100%);	
 transform:translateX(100%);
 /* Apply animation to this element */	
 -moz-animation: example1 8s linear infinite;
 -webkit-animation: example1 8s linear infinite;
 animation: example1 8s linear infinite;
}
/* Move it (define the animation) */
@-moz-keyframes example1 {
 0%   { -moz-transform: translateX(100%); }
 100% { -moz-transform: translateX(-100%); }
}
@-webkit-keyframes example1 {
 0%   { -webkit-transform: translateX(100%); }
 100% { -webkit-transform: translateX(-100%); }
}
@keyframes example1 {
 0%   { 
 -moz-transform: translateX(100%); /* Firefox bug fix */
 -webkit-transform: translateX(100%); /* Firefox bug fix */
 transform: translateX(100%); 		
 }
 100% { 
 -moz-transform: translateX(-100%); /* Firefox bug fix */
 -webkit-transform: translateX(-100%); /* Firefox bug fix */
 transform: translateX(-100%); 
 }
}
<div class="example1">
<h5>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</h5>
</div>

Заранее спасибо:)

...