This ...">
Geek asks and answers

CSS moving text from left to right

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

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

and 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 that the selection area does not stop when it reaches the right edge of the screen; it moves completely on the screen (a horizontal scroll bar appears, briefly), and then returns.

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

EDIT: Oddly enough, this doesn't work:

50% {right: 0%}
+5
source share
6 answers

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

, margin-right 100% .: D ( 18)

EDIT: http://jsfiddle.net/6LhvL/

+3

CSS.

+4

, <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;
}

. : - http://jsfiddle.net/gXdMc/6/

+1

, div. CSS.

.marquee{
    overflow:hidden;
}

, / div, .

+1

If you correctly understood that you asked the question correctly, you can create a wrapper around your tent and then assign it to the wrap element width(or max-width). For instance:

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

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

0
source

I'm not sure if this is the right solution, but I achieved this by overriding the .marquee class right after the CSS animation.

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>
0
source

More articles:


All Articles