Moving text

How to move text from center to right to left infinitely?

4th Feb 2017, 11:33 PM

CSTÑTo

8 Réponses

+ 5

Try this ( need to be adapted to fit less than viewport width ^^ ): #marquee { overflow:hidden; position:absolute; width:100%; left:0; } #marquee div { display:inline-block; margin-left:50%; -webkit-animation:marquee 3s infinite ease-in-out alternate; -moz-animation:marquee 3s infinite ease-in-out alternate; -ms-animation:marquee 3s infinite ease-in-out alternate; -o-animation:marquee 3s infinite ease-in-out alternate; animation:marquee 3s infinite ease-in-out alternate; } #marquee span { position:relative; right:50%; white-space:pre; } @-webkit-keyframes marquee { from { margin-left:-15%; } to { margin-left:115%; } } @-moz-keyframes marquee { from { margin-left:-15%; } to { margin-left:115%; } } @-ms-keyframes marquee { from { margin-left:-15%; } to { margin-left:115%; } } @-o-keyframes marquee { from { margin-left:-15%; } to { margin-left:115%; } } @keyframes marquee { from { margin-left:-15%; } to { margin-left:115%; } } ... with that html in the <body>: <div id="marquee"><div><span>bouncing text</span></div></div>

5th Feb 2017, 6:29 AM

visph

+ 4

Not really lesser code possible... However there's not really a lot: the animation rules are imposing, but just repeating for each vendors prefix... you can eventually target specific browser(s) and remove some. Beside, there's not a lot rules ^^ But you can probably earn one or two lines: I make it to be working in most generic case, but you can adapt it, more than just changing animation during time :P For the generic purpose, and the simplification of the keyfrales rules, part of css are for placing text at center with margin-left at 50% ( of viewport width, so 0 place the element centered on x=0 y-axis, and 100% on x=100% y-axis ). You can reach same kind of goal by others ways ;)

5th Feb 2017, 7:09 AM

visph

+ 3

Which contexr? Which language?

4th Feb 2017, 11:56 PM

visph

+ 2

One solution: there are others define the text as an object and increase its absolute position. the amount of change in distance will be your moving speed, when you get to the page border invert the speed. while (true){ draw a background color that will hide previously rendered text. int speed = 3; tex.pos += speed; if (text.pos<=0 || text.pos>= windowWidth){ sepeed*=-1;//invert speed render the text object in the new position } the same concept is appliable on different programming languages: if it's not the answer you are looking for, you should learn to be more particular with your words while posting questions. I'm sure it can be done purely in CSS if your goal is web design but again: what is your goal????

5th Feb 2017, 1:05 AM

seamiki