Может кто подскажет, как создать вертикальную бесконечную бегущую строку,которая не будет прерываться. В идеале текст еще и должен исчезать на дне блока (article), хотелось бы, без использования линейного градиента. Видимо, силами CSS в этом не разобраться.
article {
width: 100%;
margin: 0 auto;
position: absolute;
overflow: hidden;
height: 65%;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
.text-animation pre {
position: absolute;
font-weight: 400;
font-size: 1.5rem;
text-decoration: none;
text-align: start;
letter-spacing: .3rem;
transform: translatey(-100%);
animation-name: matrix;
animation-duration: 30s;
animation-timing-function: linear;
animation-delay: 0s;
animation-iteration-count: infinite;
animation-fill-mode: none;
animation-play-state: running;
background: none;
border: none;
margin: 0;
padding: 0;
line-height: 1;
color: black;
word-break: normal;
word-wrap: normal;
overflow: hidden;
white-space: pre-wrap; /* Since CSS 2.1 */
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
}
@keyframes matrix {
0% {
transform: translatey(-100%);
}
50% {
transform: translatey(0%);
}
100% {
transform: translatey(100%);
}
}
.text-animation pre:nth-child(1) {
left: -25%;
font-size: 1.65em;
animation-delay: 15s;
}
.text-animation pre:nth-child(2) {
left: -25%;
font-size: 1.65em;
animation-duration: 10s;
}
.basket {
position: absolute;
bottom: 0;
width: 100%;
height:34%;
border: 5px solid black;
}
<section class="wrap">
<article class="text-animation">
<pre>
s
s
s
s
s
s
s
s
s
s
s
s
s
</pre>
<pre>
g
g
g
g
g
g
g
g
g
g
g
g
</pre>
<pre>
r
r
r
r
r
r
r
r
r
r
r
r
</pre>
</article>
<div class="basket">
</div>
</section>