Jump to content
Welcome! Community launches Feb. 1st ×
  • 0

Scrolling Text


Rob Bedeaux

Question

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>

 

 

Rob Bedeaux (he/him/his)

Director, Content Marketing & Strategy

E rob.bedeaux@nbcuni.com

 

 

Link to comment
Share on other sites

24 answers to this question

Recommended Posts

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

 

 

 

 

 

Link to comment
Share on other sites

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 

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

Rob Bedeaux (he/him/his)

Director, Content Marketing & Strategy

E rob.bedeaux@nbcuni.com

 

 

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...