how to create a continuous running line? [closed]

Question

how to create a continuous running line?

Here is one way - convert the text into a texture, drag it onto the cylinder, rotate the cylinder in webGL.
By the way, according to the answers, I do not see continuity in both :) Have you guys ever seen the running line?
in short, we create two blocks with a width of 100% or more, we duplicate them (unfortunately it will not work otherwise) that we are going to run, we shift by 100% (we mean the width of the text block, if it is larger than the width of the container), in the right direction with transients , then without transiting we shift back, and so on.
Otherwise (without duplication) - a bitmap shift (almost what I wrote from above_

ߊߚߤߘ 10.3k 6 26 58 · Accepted Answer · 2017-05-21T16:24:18

You can use the jQuery.Marquee plugin.

duplicated - sets the continuity of the text.
startVisible - the text should fill the space at the start.
duration - sets the time for which the text should scroll.

$(function() { $('.marquee').marquee({ duration: 7000, startVisible: true, duplicated: true }); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/jquery.marquee/1.4.0/jquery.marquee.min.js"></script> <div class='marquee' style='overflow:hidden'>jQuery plugin to scroll the text like the old traditional marquee. A 5.51 KB (minified) jQuery plugin to scroll the text like the old traditional marquee.</div>

ishidex2 ishidex2 6.212 2 12 40 · Answer 2 · 2017-05-21T14:31:54

use the Marquee tag, but consider it outdated. But it still works.

 <marquee direction="right" scrollamount="10">Бегущая строка</marquee>

It's funny that when searching in Google marquee html , the creeping line is displayed.

Answer 3 · 2017-05-21T15:18:18

Running line can also be implemented using css

Example

 * { padding: 0; margin: 0; -webkit-box-sizing: border-box; box-sizing: border-box; } .b-marquee { font-family: 'Segoe UI', sans-serif; white-space: nowrap; overflow: hidden; background: #333; color: #fff; padding: 10px; position: relative; margin-bottom: 10px; } .b-marquee__text { -webkit-animation: animMarquee 5s linear infinite; animation: animMarquee 5s linear infinite; } @-webkit-keyframes animMarquee { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 100% { -webkit-transform: translateX(100%); transform: translateX(100%); } } @keyframes animMarquee { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 100% { -webkit-transform: translateX(100%); transform: translateX(100%); } } /* text right to left*/ .b-marquee--rtl {} .b-marquee--rtl .b-marquee__text { -webkit-animation: animMarqueeRtl 5s linear infinite; animation: animMarqueeRtl 5s linear infinite; } @-webkit-keyframes animMarqueeRtl { 0% { -webkit-transform: translateX(100%); transform: translateX(100%); } 100% { -webkit-transform: translateX(0%); transform: translateX(0%); } } @keyframes animMarqueeRtl { 0% { -webkit-transform: translateX(100%); transform: translateX(100%); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } }

 <div class="b-marquee"> <div class="b-marquee__text">Text left to right</div> </div> <div class="b-marquee b-marquee--rtl"> <div class="b-marquee__text">Text right to left</div> </div>

@Qwertiy is for Android 4 versions, and 5 and higher already without the prefix -webkit- works
@ Alex78191 - this is just one of the solutions, + the author of the question may not be aware that this problem can be solved with the help of css

Sasha Omelchenko Sasha Omelchenko 10.9k four 20 52 · Answer 4 · 2017-05-21T17:26:36

If you want to JS, then please :-)

 var wrapper = document.querySelector('.marquee-wrapper'), marquee = document.querySelector('.marquee'), wrapperWidth = wrapper.offsetWidth, marqueeWidth = marquee.scrollWidth; document.querySelector('button').onclick = function() { clearInterval(interval) } function move() { var currentTX = getComputedStyle(marquee).transform.split(','); if( currentTX[4] === undefined ) { currentTX = -1; } else { currentTX = parseFloat(currentTX[4]) - 1; } if(-currentTX >= marqueeWidth) { marquee.style.transform = 'translateX(' + wrapperWidth + 'px)'; } else { marquee.style.transform = 'translateX(' + currentTX + 'px)'; } } var interval = setInterval(move, 40);

 .marquee-wrapper { width: 300px; overflow: hidden; position: relative; } .marquee-wrapper:after { position: absolute; content: ' '; right: 0; top: 0; width: 50px; height: 100%; background-image: linear-gradient(to right, transparent, #fff); } .marquee { white-space: nowrap; }

 <div class=marquee-wrapper> <p class=marquee>это бегущая строка, которая реализована при помощи яваскрипта, хотя можно было бы и без него</p> </div> <button>stop</button>

How to make the line just start to run from left to right when loading a page and not to be already filled?
And the second question, is it possible to pause when you hover on a line?
2. add onmouseover handlers (just reset the interval, as it is now to click on the button) and onmouseout (just start the interval, as now at the end of the code)

how to create a continuous running line? [closed]

Closed due to the fact that the essence of the question is not clear to the participants of the zb ' , Kromster , Dmitriy Simushev , andreymal , Alexander Petrov 24 May '17 at 0:37 .

4 answers 4

More articles: