Css Continuous Horizontal Text Scroll Without Break

2. Pure CSS Continuous Horizontal Text Scroll Without Break

Pure CSS Continuous Horizontal Text Scroll Without Break

Solution 1

You could try having two marquees and set one of them with a delayed animation of 2.5s which is half the time of the full animation (5s).

              .marquee {   margin: 0 auto;   white-space: nowrap;   overflow: hidden;   position: absolute; }  .marquee span {   display: inline-block;   padding-left: 100%;   animation: marquee 5s linear infinite; }  .marquee2 span {   animation-delay: 2.5s; }  @keyframes marquee {   0% {     transform: translate(0, 0);   }   100% {     transform: translate(-100%, 0);   } }            

              <p class="marquee">   <span>This is text - This is text - This is text - This is text - This is text - This is text - This is text - This is text - This is text - This is text - This is text - This is text -&nbsp;</span> </p> <p class="marquee marquee2">   <span>This is text - This is text - This is text - This is text - This is text - This is text - This is text - This is text - This is text - This is text - This is text - This is text -&nbsp;</span> </p>            

Solution 2

This is similar to above answer. I have taken it from the official website of Next.js. They have used this with SVGs to make a slider to show which popular companies are using their framework.

              .wrapper {   max-width: 100%;   overflow: hidden; }  .marquee {   white-space: nowrap;   overflow: hidden;   display: inline-block;   animation: marquee 10s linear infinite; }  .marquee p {   display: inline-block; }  @keyframes marquee {   0% {     transform: translate3d(0, 0, 0);   }   100% {     transform: translate3d(-50%, 0, 0);   } }            

              <div class="wrapper">   <div class="marquee">     <p>       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce volutpat, ante eu bibendum tincidunt, sem lacus vehicula augue, ut suscipit.     </p>     <p>       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce volutpat, ante eu bibendum tincidunt, sem lacus vehicula augue, ut suscipit.     </p>   </div> </div>            

Related videos on Youtube

01 : 35

HTML : Pure CSS Continuous Horizontal Text Scroll Without Break

14 : 26

How to create an infinite scroll carousel with css

01 : 20

CSS : Pure CSS Continuous Horizontal Text Scroll Without Break

01 : 17

Pure CSS Continuous Horizontal Text Scroll Without Break - HTML

01 : 17

Pure CSS Continuous Horizontal Text Scroll Without Break - CSS

Comments

• I'm trying to create a news ticker with horizontal text that scrolls continuously without a break between loops. Ideally, the solution would be pure css/html, but I don't know if that's possible. Here's my rudimentary attempt so far: http://jsfiddle.net/lgants/ncgsrnza/. Note that the fiddle contains an unwanted break between each loop.

                      <p class="marquee"><span>This is text - This is text - This is text - This is text - This is text - This is text - This is text - This is text - This is text - This is text - This is text - This is text</span></p>       .marquee {         margin: 0 auto;         white-space: nowrap;         overflow: hidden;     }          .marquee span {         display: inline-block;         padding-left: 100%;         animation: marquee 5s linear infinite;     }                                      

  • Hm... is it possible to duplicate the text? Otherwise I guess there is a little bit of JS necessary just to clone the text layer a few times

  • @lumio what do you mean by duplicate text? I'm going to use React, so it'd be very easy to reuse a component.

  • Let me try to explain... :) give me a few minutes

  • Just read the other answer - beside the problem with short text it should work just fine

• Just a comment: there is no need to duplicated the keyframes (marquee2) for this concept to work.

• @rmurph46 Cleaned up your answer a bit to reduce redundant code, fix a bug and brought it to a Stack Snippet. Good work!

• If the text is too short you can continue to duplicate the marquees and adjust the animation delays. Alternatively you can use js to remove/add the class with the animation at specific time intervals but @lgants wanted pure css/html.

• I was able to make the text start from the left by adding a negative animation delay to the first span and setting the second span to have no delay. .marquee1 span { animation-delay: -2.5s; } .marquee2 span { animation-delay: 0s; }

• This depends on the width of the container. If width is high, text will suddenly show up when in middle of page.

• @MartinMeeser You're right. But that depends on how fast a particular (user's) browser can render the moving paragraph (especially just before the X-axis translate). And it can be prevented to some extent by slowing down the animation.

• @AndrewHawes THANK YOU

• This answer fixed my problem perfectly. kudos sir.

Recents

Related

sessionsgreamen.blogspot.com

Source: https://9to5answer.com/pure-css-continuous-horizontal-text-scroll-without-break

Share this post