CSS-moving text from left to right

Question

I want to create an animated HTML "marquee" that scrolls back and forth on a website:

<div class="marquee">This is a marquee!</div>

and the CSS:

.marquee {
    position: absolute;
    white-space: nowrap;
    -webkit-animation: rightThenLeft 4s linear;
}

@-webkit-keyframes rightThenLeft {
    0%   {left: 0%;}
    50%  {left: 100%;}
    100% {left: 0%;}
}

The problem is, the marquee doesn't stop when it reaches the right-hand edge of the screen; it moves all the way off the screen (making a horizontal scroll bar appear, briefly) and then comes back.

So, how do I make the marquee stop when its right-hand edge reaches the right-hand edge of the screen?

EDIT: Oddly, this does not work:

50% {right: 0%}

@Webtecher how would the javascript know when to stop the animation? — tanis.control, May 21 '12 at 04:34
Instead of left: 100% it should be left: `100% - ( number of characters in string * space taken by single character )` Now, obviously you will not do such things in css. So better instead of using `left` or `right` , use `margin-left` or `margin-right`. — Rakesh Juyal, May 21 '12 at 04:57
Yes, but it still doesn't work, even if you change my code to `margin-left` — tanis.control, May 21 '12 at 05:06

ephemeron · Accepted Answer · 2012-05-21T05:09:24.813

4

Somehow I got it to work by using margin-right, and setting it to move from right to left. http://jsfiddle.net/gXdMc/

Don't know why for this case, margin-right 100% doesn't go off the screen. :D (tested on chrome 18)

EDIT: now left to right works too http://jsfiddle.net/6LhvL/

edited May 21 '12 at 05:09

answered May 21 '12 at 04:45

ephemeron

396
2
12

Yeah this works, thanks :). Hopefully someone can comment on why this is the case. I think it's because of your {text-align: right;} – tanis.control May 21 '12 at 04:58
@tanis.control see my comment in your question. – Rakesh Juyal May 21 '12 at 05:03
note that changing the css to using `text-align:left` and `margin-left` doesn't produced desired outcome. Only works with `text-align: right` and `margin-right`. I've edited my answer for the direction you wanted :) – ephemeron May 21 '12 at 05:10
What if the text is bigger than the container? The text does not move all together. http://jsfiddle.net/sj3k6kgu/ – PDoria Jan 29 '17 at 13:29

score 3 · Answer 2 · answered Feb 19 '13 at 12:02

3

You could simply use CSS animated text generator. There are pre-created templates already

answered Feb 19 '13 at 12:02

Timur Gafforov

771
3
10
28

score 2 · Answer 3 · answered May 21 '12 at 07:30

Hi you can achieve your result with use of <marquee behavior="alternate"></marquee>

HTML

<div class="wrapper">
<marquee behavior="alternate"><span class="marquee">This is a marquee!</span></marquee>
</div>

CSS

.wrapper{
    max-width: 400px;
    background: green;
    height: 40px;
    text-align: right;
}

.marquee {
    background: red;
    white-space: nowrap;
    -webkit-animation: rightThenLeft 4s linear;
}

see the demo:- http://jsfiddle.net/gXdMc/6/

Unfortunately, deprecated. – wizzwizz4 Mar 24 '16 at 20:19 — wizzwizz4, Mar 24 '16 at 20:19

score 1 · Answer 4 · edited Apr 24 '13 at 01:01

1

I like using the following to prevent things being outside my div elements. It helps with CSS rollovers too.

.marquee{
    overflow:hidden;
}

this will hide anything that moves/is outside of the div which will prevent the browser expanding and causing a scroll bar to appear.

edited Apr 24 '13 at 01:01

Jesse

8,605
7
47
57

answered Apr 24 '13 at 00:41

Spider Pig

11
1

score 0 · Answer 5 · answered May 21 '12 at 04:04

0

If I understand you question correctly, you could create a wrapper around your marquee and then assign a width (or max-width) to the wrapping element. For example:

<div id="marquee-wrapper">
    <div class="marquee">This is a marquee!</div>   
</div>

And then #marquee-wrapper { width: x }.

answered May 21 '12 at 04:04

David542

104,438
178
489
842

I thought of this, too, but it doesn't work. {left: 100%} makes it move all the way off the screen. I wish I could do {left: 100% - 30px} – tanis.control May 21 '12 at 04:17

score -1 · Answer 6 · edited Nov 12 '16 at 05:22

I am not sure if this is the correct solution but I have achieved this by redefining .marquee class just after animation CSS.

Check below:

<style>
#marquee-wrapper{
    width:700px;
    display:block;
    border:1px solid red;
}

div.marquee{
width:100px;
height:100px;
background:red;
position:relative;
animation:myfirst 5s;
-moz-animation:myfirst 5s; /* Firefox */
}

@-moz-keyframes myfirst /* Firefox */{
0%   {background:red; left:0px; top:0px;}
100% {background:red; left:100%; top:0px}
}
div.marquee{ 
left:700px; top:0px
}
</style>

<!-- HTMl COde -->

<p><b>Note:</b> This example does not work in Internet Explorer and Opera.</p>
<div id="marquee-wrapper">
<div class="marquee"></div>

CSS-moving text from left to right

6 Answers6

Linked