Jquery / css: make text inside a div scroll horizontally, like a news ticker without a plugin

Question

Does anyone have any tips on how to make text inside a scroll div horizontally from right to left in the "news ticker" mode without using a plugin. Here is an example of what I'm trying to accomplish (this is a plugin solution: http://www.maaki.com/scrollingText.html ).

Answer 1

Here is a quick solution: http://jsfiddle.net/4mTMw/8/

var marquee = $('div.marquee'); marquee.each(function() { var mar = $(this),indent = mar.width(); mar.marquee = function() { indent--; mar.css('text-indent',indent); if (indent < -1 * mar.children('div.marquee-text').width()) { indent = mar.width(); } }; mar.data('interval',setInterval(mar.marquee,1000/60)); });​ 

Using the text-indent css property, you can do this quite simply.

Answer 2

I recently solved this with CSS keyframe animation.

Essentially, your ticker needs a wrapper div with an overflow hidden on it. Elements containing tickers should display an inline block, so they are on the line:

 <div class="ticker-wrap"> <div class="ticker"> <div class="ticker__item">Letterpress chambray brunch.</div> <div class="ticker__item">Vice mlkshk crucifix beard chillwave meditation hoodie asymmetrical Helvetica.</div> <div class="ticker__item">Ugh PBR&B kale chips Echo Park.</div> </div> </div> 

CSS example:

 .ticker-wrap { position: fixed; bottom: 0; width: 100%; overflow: hidden; height: 4rem; background-color: rgba(51, 51, 51, 0.5); padding-left: 100%; // offsets items to begin } .ticker { display: inline-block; height: 4rem; line-height: 4rem; white-space: nowrap; padding-right: 100%; // taken from container as display inline-block } .ticker__item { display: inline-block; padding: 0 2rem; font-size: 2rem; color: white; } 

I have a demo that uses css keyframe animation to then transform content completely from one side to the other endlessly. notabene Variants with a vendor prefix are not shown.

 @keyframes ticker { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } 

The only thing you need is to set the duration of the animation and apply it to .ticker.

 .ticker { animation-name: ticker; animation-iteration-count: infinite; animation-timing-function: linear; animation-duration: 25s; // tweak based on number of items/desired speed } 

You can see the full demo.

Answer 3

you could do something like this

 <div id="scrollcontainer" style="postion:relative; overflow:hidden; width:100%;"> <span id="scrolltext" style="position:absolute; white-space:nowrap">this is the scrolling text</span> </div> 

and js function

 function scroll() { $('#scrolltext').css('left', $('#scrollcontainer').width()); $('#scrolltext').animate({ left: '-='+($('#scrollcontainer').width()+$('#scrolltext').width()) }, 2000, function() { scroll(); }); } scroll(); 

tested. can be found here: http://jsfiddle.net/zrW5q/85/