Scrolling Text

[Rob Bedeaux]

Ever wanted to create a bit of text that scrolls across your screen? With this simple code block and the head code you can input some text and have it 'march' across the container similar to how the news scroll works. 

 

Put this bit in the head code of the page

<style style="text/css">
.example1 {
 height: 50px;  
 overflow: hidden;
 position: relative;
}
.example1 h3 {
 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: example1 15s linear infinite;
 -webkit-animation: example1 15s linear infinite;
 animation: example1 15s linear infinite;
}
/* Move it (define the animation) */
@-moz-keyframes example1 {
 0%   { -moz-transform: translateX(100%); }
 100% { -moz-transform: translateX(-100%); }
}
@-webkit-keyframes example1 {
 0%   { -webkit-transform: translateX(100%); }
 100% { -webkit-transform: translateX(-100%); }
}
@keyframes example1 {
 0%   { 
 -moz-transform: translateX(100%); /* Firefox bug fix */
 -webkit-transform: translateX(100%); /* Firefox bug fix */
 transform: translateX(100%);     
 }
 100% { 
 -moz-transform: translateX(-100%); /* Firefox bug fix */
 -webkit-transform: translateX(-100%); /* Firefox bug fix */
 transform: translateX(-100%); 
 }
}
</style>

 

Put this bit in your code page element

 

 

<div class="example1">
<h3>YOUR TEXT HERE. YOUR TEXT HERE. YOUR TEXT HERE.</h3>
</div>

 

 

[gregzerafa]

this worked great. How do we increase size of message?

[Rob Bedeaux]

Sure...that's easy. The message is wrapped in an <h3> tag. You can change that from <h1> to <h5> larger to smaller. Don't forget to close the tag at the end with an </h3> or </h4> or whatever size you use.

 

Additionally, you will need to alter the 

.example1 h3 {

 

bit to match your size

[gregzerafa]

ALSO HOW TO INCREASE LENGTH OF MESSAGE CUTS OUT AFTER CERTAIN NUMBER OF CHARACTERS. 

[Rob Bedeaux]

Great question! Any real front end developers out there care to take a crack at this? My meager CSS skills are at their limit.

[pmcaughey]

I was able to increase the length of the message by increasing the width variable to a number larger than 100%.

[Bryan Hopper]

Has anyone found a way to make this longer and slower? When i went to increase the width, the message was longer but it went faster...seems like an easy fix but I have no idea how to do it!

 

thanks

[SportsEngine Staffer]

Hi Bryan,

 

In the code, you can change the speed of the scroll here:

 

/* Apply animation to this element */  

 -moz-animation: example1 15s linear infinite;

 -webkit-animation: example1 15s linear infinite;

 animation: example1 15s linear infinite;

 

 

 

 

Change the 15 to a higher number for a slower scroll, a lower number gives a faster scroll.

Hope that helps!

- Loren

 

P.S. Here's a site that allows you to check out and play with different types of marquee code.

[Bryan Hopper]

Hi Loren, 

 

Thanks for the quick reply, I was able to get the text to move faster, but now that I have increased the width, it seems like it takes a while for the text to even appear on the screen...seems like this is getting more complicated!

[SportsEngine Staffer]

Hey Bryan,

 

Send me an example of the page you are referring to, and I can take a look. If you are talking about your home page, the scroll shows up right away for me.

 

- Loren

[Bryan Hopper]

Hi Loren, 

 

If you scroll all the way down to the bottom of our home page, and wait a second or two, the scroll will appear with a list of college. I had to increase width to %500 and then made it 45s. It just is very delayed in starting to appear...

[SportsEngine Staffer]

Hey Bryan,

 

OK, I think I might have figured this out. If you delete the code you dropped into your head code, and then just add the code below as a code element on the page, I think it will work for you.

 

<!-- HTML -->

<marquee behavior="scroll" direction="left" scrollamount="10" scrolldelay="50"><div class="example1">

<h3>United States Naval Academy, United States Military Academy, Yale, Villanova, Princeton, University of Pennsylvania, Georgetown, Cornell, Amherst, Middlebury, Virginia, Brown, North Carolina, Maryland, Fairfield, Lafayette, Richmond, Bucknell, Tufts, Penn State, Mt. St. Marys, Hobart, Delaware, Babson, Rutgers, Hamilton, Salisbury, Oberlin,</marquee></div></h3>

 

 

Let me know how this works.

 

 

- Loren

[Bryan Hopper]

Loren,

 

This worked perfectly! I think this is actually a better option than the code above, easier to work with. Thanks for being so responsive!

 

Bryan

[Bryan Hopper]

Loren,

 

Just when we though we were out of the trees, it looks like it doesnt work on mobile phones...oh well. I will search for another way to do it!

 

 

[SportsEngine Staffer]

Ok, Bryan, I think I have this figured out this time (no really).

 

 

Try this in your head code:

 

 

<!DOCTYPE html>

<html>

<head>

<!-- Styles -->

<style style="text/css">

.example1 {

height: 50px;

overflow: hidden;

position: relative;

}

.example1 h3 {

position: absolute;

width: 4500px;

height: 100%;

margin: 0;

line-height: 50px;

text-align: center;

/* Starting position */

-moz-transform:translateX(0%);

-webkit-transform:translateX(0%);

transform:translateX(0%);

/* Apply animation to this element */

-moz-animation: example1 15s linear infinite;

-webkit-animation: example1 15s linear infinite;

animation: example1 15s linear infinite;

}

/* Move it (define the animation) */

@-moz-keyframes example1 {

100% { -moz-transform: translateX(100%); }

100% { -moz-transform: translateX(-100%); }

}

@-webkit-keyframes example1 {

100% { -webkit-transform: translateX(100%); }

100% { -webkit-transform: translateX(-100%); }

}

@keyframes example1 {

100% {

-moz-transform: translateX(100%); /* Firefox bug fix */

-webkit-transform: translateX(100%); /* Firefox bug fix */

transform: translateX(100%);

}

100% {

-moz-transform: translateX(-100%); /* Firefox bug fix */

-webkit-transform: translateX(-100%); /* Firefox bug fix */

transform: translateX(-100%);

}

}

</style>

</head>

<body>

 

 

 

And then drop this code wherever you want it on the page:

 

 

<!-- HTML -->

<div class="example1">

<h3>United States Naval Academy, United States Military Academy, Yale, Villanova, Princeton, University of Pennsylvania, Georgetown, Cornell, Amherst, Middlebury, Virginia, Brown, North Carolina, Maryland, Fairfield, Lafayette, Richmond, Bucknell, Tufts, Penn State, Mt. St. Marys, Hobart, Delaware, Babson, Rutgers, Hamilton, Salisbury, Oberlin,</h3>

</div>

</body>

</html>

 

 

 

 

You will need to adjust the scroll speeds to fit your preference.

 

 

I tried this in Chrome, Safari and Firefox at multiple widths, and tested on iPhone and Android.

 

Let me know how this works.

 

- Loren

 

 

 

 

 

[Bryan Hopper]

This worked! Thank you so much Loren! Everything is set now. Thanks so much!

[SportsEngine Staffer]

That's great to hear! 

 

I just posted a Pro Tips article on how to put scrolling text on a page: http://community.sportngin.com/news_article/show/689702?referrer_id=1286159

- Loren

[akmillers]

What's the best way to decrease the delay encountered when loading the page and in-between animations? 

 

Your original code on this post was perfect as far as speed and start delay but had problems on mobile devices. The final iteration of your code works on everything...but the animation start delay is longer then desired. Anyone have any suggestions?  Thank you for this tip!

 

--Chris 

[SportsEngine Staffer]

Hi Chris,

 

I'm certainly no CSS expert, but what I noticed in playing around with this code is that the original version of the code worked fine, in terms of delay, with short messages. But once the messages got longer and longer (beyond the width of the page), and the width in the code needed to be bumped up, the delay became much too long.

 

I think it is important to make sure the width is set as close as possible to exact percentage (or pixels) of the message. That should help reduce the delay.

 

I also played around with the percentage on the starting position code, reducing it from 100 percent to 0 percent at one point, but I'm not sure what effect that had.

 

-- Loren

[Tim Hobgood]

I followed the link you provided to some of the other marquee effects. Where would I add/integrate the code the marquee? In the head code, as a code element on the page?

 

Any assistance is greatly appreciated.

 

Cheers,

Tim

[SportsEngine Staffer]

You could put the code in either place, really. if you want it on just the one page, the code element would work. If you want it on multiple pages, or throughout the site, you would want to use the Head Code option.

[Tim Hobgood]

Thank you for that. When I put the code in it reacts like it should but I don't see anywhere that I can manipulate the text, i.e. size, color...

[Tim Hobgood]

I missed some info in my last post...if I was to put it in the head option where exactly would I put it within the code?

[SportsEngine Staffer]

You could paste it below anything you have existing in the head code. Just make sure you code starts with <style> and ends with </style>

[SportsEngine Staffer]

To play around with the size, color, font of the marquee, I would suggest going here to modify your code: https://www.quackit.com/html/html_editors/scratchpad/?example=/css/codes/marquees/scrolling_text