Smooth Scrolling Marquee

I didn’t see any real recent conversations on this, so I thought I’d make a new post.
I’m not even 100% sure I’l be using this in my deployment, but I thought I’d share what has worked well.

When using regular HTML Marquee, the preview will look buttery smooth, but on the android player, it is pretty choppy, maybe 30fps or less.

I found, with the help of http://www.html.am that by using CSS “Scrolling Text” it looks so much better!

Here is an example, for my embedded content, I am only using the CSS portion, no HTML to Embed or Java.

<div class="scroll-left">
<p>Text to Display</p>
</div>

<style style="text/css">
.scroll-left {
/* the height is just set to the height of my region. not sure if this is 
    needed? */
height: 68px; 	
 overflow: hidden;
 position: relative;
 /* I'm using the transparent background as this is in an overlay layout */
 background: transparent;
 color: #000000;
 font-family:proxima nova rg bold;
 font-size: 40px;
 font-weight: bold;
 
}
.scroll-left p {
 position: absolute;
 width: 100%;
 height: 100%;
 margin: 0;
 line-height: 50px;
 text-align: center;
 /* Starting position */
 -moz-transform:translateX(100%);
 -webkit-transform:translateX(100%);	
 transform:translateX(100%);
 /* Apply animation to this element */	
 -moz-animation: scroll-left 28s linear infinite;
 -webkit-animation: scroll-left 28s linear infinite;
 animation: scroll-left 28s linear infinite;
}
/* Move it (define the animation) */
@-moz-keyframes scroll-left {
 0%   { -moz-transform: translateX(100%); }
 100% { -moz-transform: translateX(-100%); }
}
@-webkit-keyframes scroll-left {
 0%   { -webkit-transform: translateX(100%); }
 100% { -webkit-transform: translateX(-100%); }
}
@keyframes scroll-left {
 0%   { 
 -moz-transform: translateX(100%); /* Browser bug fix */
 -webkit-transform: translateX(100%); /* Browser bug fix */
 transform: translateX(100%); 		
 }
 100% { 
 -moz-transform: translateX(-100%); /* Browser bug fix */
 -webkit-transform: translateX(-100%); /* Browser bug fix */
 transform: translateX(-100%); 
 }
}
</style>

It is crazy smooth! :sunglasses::thumbsup: like a nice dark porter that slides right on down.

I hope this helps someone else trying to do the same thing.

3 Likes

Very nice ! Thank you very much

Hi! My first post. I was having a problem with sluggish marquee text, and Google brought me here. My luck! Your suggestion worked perfectly, and all is smooth now. Thank you!

I’m new to CSS (hey, we ALL were newbies ONCE upon a time, right?), and I have a follow-up. I’d also like my ticker text to “pause” when pointed at with the cursor, and each element to be hyperlinked to a supporting article. Any suggestions?