jquery / css: make text inside div scroll horizontally like a news ticker no plugin
Here's a quick solution to this: 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 rather simply.
I recently solved this with CSS keyframe animations.
Essentially your ticker needs a wrapper div with overflow hidden on it. The tickers contained items should display inline-block so they are in a 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>
Example CSS:
.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 the css keyframe animation to then transform the content all the way from one side to the other infinitely. n.b. Vendor prefixed versions 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 tweak you need is to set the animation duration 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