Search code examples
cssanimationdurationmarquee

Animation duration?

I have a simple CSS marquee scrolling up across a screen, essentially using the code found here (JSFiddle):

https://jsfiddle.net/c8r5kc1L/1/

<style style="text/css">
.marquee-outer {
 height: 100px; 
 overflow: hidden;
 position: relative;
 color: orange;
}
.marquee-inner {
 position: absolute;
 width: 100%;
 height: 100%;
 margin: 0;
 line-height: 50px;
 text-align: center;
 /* Starting position */
 -moz-transform:translateY(100%);
 -webkit-transform:translateY(100%);    
 transform:translateY(100%);
 /* Apply animation to this element */  
 -moz-animation: scroll-up 5s linear infinite;
 -webkit-animation: scroll-up 5s linear infinite;
 animation: scroll-up 5s linear infinite;
}
/* Move it (define the animation) */
@-moz-keyframes scroll-up {
 0%   { -moz-transform: translateY(100%); }
 100% { -moz-transform: translateY(-100%); }
}
@-webkit-keyframes scroll-up {
 0%   { -webkit-transform: translateY(100%); }
 100% { -webkit-transform: translateY(-100%); }
}
@keyframes scroll-up {
 0%   { 
 -moz-transform: translateY(100%); /* Browser bug fix */
 -webkit-transform: translateY(100%); /* Browser bug fix */
 transform: translateY(100%);       
 }
 100% { 
 -moz-transform: translateY(-100%); /* Browser bug fix */
 -webkit-transform: translateY(-100%); /* Browser bug fix */
 transform: translateY(-100%); 
 }
}
</style>

<div class="marquee-outer">
<div class="marquee-inner">Text</div>
</div>

I am trying to enter several paragraphs worth of content into the actual scroll area, which means that the animation resets before I've gotten through all the content. If I increase the animation duration (say, to 100s), the animation slows down, and ends up going through the same (partial) amount to the information.

Is there a way to keep the speed of the scroll constant, but actually just increase the duration of the scroll prior to reset?

Solution

  • I found a solution, if you "sync" the -100% with the amount of paragraphs that you want (And uses <p> inside <div class="marquee-inner"> because it gives you more control in the scrolling animation):

    100% { 
     transform: translateY(-100%); 
}

    So is you want to have 4 paragraphs do something like this:

     100% { 
   transform: translateY(-400%); 
}

    And also don't use line-height: 50px; in .marquee-inner instead use margin-bottom:

    .marquee-inner p{
  margin-bottom: 30px;
}

    Look the example: https://jsfiddle.net/u2j2679u/