Question:
Can someone tell me how to create a vertical endless running line that will not break. Ideally, the text should also disappear at the bottom of the block (article), it would be desirable, without using a linear gradient. Apparently, CSS can't figure it out.
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>Answer:
We are not afraid of a long code – JS is for beauty (I got carried away again))) and is not necessary to solve the starting question. Actually, the "runner" itself is implemented in CSS (all the "magic" in the last three rules), markup and positioning. The principle is simple, if not primitive:
- wrapper container with
position: absolute;andoverflow: hidden;; - container for text with
position: relative;on which all the animation is hung; - the text itself, which should be repeated twice ( important! – without spaces, translations and indents).
Those. nothing unusual. The devil is in the details.
For some reason, the most common mistake is to scroll the entire line at once by > 100%, without thinking what will happen at the end of the line. And there will be an animation jump to the zero frame, where the beginning of the line is located. That. trying to replace the trimmed tail of a string with a meaningful start is the wrong way to go.
The second option is to "finish" with spaces and/or scroll the line (container) as far as possible. Also the wrong approach, because different font sizes, etc.
Here the algorithm is simple: a line, when you enter it, we duplicate it once. Now the line can start twice – from the beginning and from the middle. We scroll the line by 50%, i.e. to the middle. Next, there is already a repetition of the line. This is where you need to move on to the beginning of the animation, i.e. dump to the beginning.
This is how a cyclically repeating animation without "jumps" is organized.
window.onload = function() { let oSectionWrap = document.querySelector('section.wrap'); let oRefRunningStr = oSectionWrap.querySelector('article.text-animation'); let ofragment = document.createDocumentFragment(); let nQ = 3.5; // (0-99) Чем меньше коэффициент, тем больше количество бегущих строк (Осторожно с большим количеством - нагрузка на ЦП и ГП!) for (let i = nQ; i < 100; i += nQ) { let oNewRunningStr = oRefRunningStr.cloneNode(true); // let sRandomStr = 'Своя строка (должна быть больше, чем высота контейнера)'; // Чем длиннее строка, тем быстрее она будет бежать на экране. let sRandomStr = fRandomStr(); oNewRunningStr.style.left = i + '%'; oNewRunningStr.style.zIndex = (i % 2) ? '100' : '0'; oNewRunningStr.firstElementChild.innerHTML = sRandomStr + sRandomStr; ofragment.appendChild(oNewRunningStr); } oSectionWrap.appendChild(ofragment); } function fRandomStr() { let sResultStr = ''; //let sArrayChars = '01010101010101010101'; // (для символов двоичного кода) let sArrayChars = '0123456789qwertyuiopasdfghjklzxcvbnmQWERTYUIOPASDFGHJKLZXCVBNM'; let nNumbChars = sArrayChars.length - 1; let nRandNumbChars = Math.floor(Math.random() * 300) + 75; let nPosChar; for (let i = 0; i < nRandNumbChars; ++i) { nPosChar = Math.floor(Math.random() * nNumbChars); sResultStr += sArrayChars.substring(nPosChar, nPosChar + 1); } return sResultStr; }
* { box-sizing: border-box; margin: 0; padding: 0; } .wrap { background: url('//www.pcrevue.sk/files/photo/2017-03/25643/6c53a5/C5vo9MV.jpg') #333; font: bold 15vh 'Courier New', monospace; height: 100vh; position: relative; } .WrapScroller { height: 5em; position: absolute; z-index: 5; } .TitleScroller { font: 2em/1em 'Arial Black'; text-shadow: 0 0 45px rgba(56, 253, 44, 0.95); } .basket { background: linear-gradient(to top, #000, rgba(0, 0, 0, 0)); border: 5px solid black; bottom: 0; height: 30vh; left: 0; position: absolute; width: 100%; z-index: 6; } .text-animation { height: 100%; overflow: hidden; position: absolute; } .text-animation div { animation-delay: 0s; animation-duration: 50s; animation-iteration-count: infinite; animation-name: matrix; animation-play-state: running; animation-timing-function: linear; color: #080; font: 5vh 'Courier New', monospace; position: relative; text-align: center; text-shadow: 0 0 1px rgba(87, 255, 0, 0.93); transform: translatey(-100%); width: 1em; word-wrap: break-word; } @keyframes matrix { 0% { transform: translatey(-50%); } 100% { transform: translatey(0%); } }
<section class="wrap"> <!-- Устаревший, но до сих пор работающий тег <marquee> будет всегда актуален. Он как JQuery, но только в один тег :-) --> <marquee class="WrapScroller" behavior="alternate" direction="down" scrollamount="1" scrolldelay="70" truespeed> <marquee class="TitleScroller" behavior="alternate" scrollamount="1" scrolldelay="60" truespeed>MATRIX</marquee> </marquee> <!-- end marquee --> <div class="basket"> </div> <article class="text-animation"> <div>Может кто подскажет,как создать вертикальную бесконечную бегущую строку,которая не будет прерываться.В идеале текс еще и должен исчезать на дне блока (article),вот только бы, без использования линейного градиента. Видимо,силами CSS в этом не разобраться.Может кто подскажет,как создать вертикальную бесконечную бегущую строку,которая не будет прерываться.В идеале текс еще и должен исчезать на дне блока (article),вот только бы, без использования линейного градиента. Видимо,силами CSS в этом не разобраться.</div> </article> </section>
As I wrote above, the bulk of the code is for clarity, and can be shortened by two to three times. The code contains explanations of the main blocks and parameters. But if you have any questions, please comment.
PS Oh, yes… As for the second question: they haven't come up with a gradient for the text yet, which would not interact with the background. Incl. fade out only when overlaying a background with a gradient…