jQuery Marquee
HTML
<div class="scroller" id="scroller">
<div class="scrollingtext" id="scrollingtext"><a style="color:white" href="https://www.google.com/">This is a Marquee with slower speed and clickable only on the text. </a>
</div>
</div>
<button id="left">Left</button>
<button id="right">Right</button>
CSS
.scroller {
background-color: #B40404;
color: #ffffff;
font-family: Verdana;
font-size: 14px;
height:25px;
line-height:28px;
overflow:hidden;
position:relative;
}
.scrollingtext {
color: #ffffff;
white-space:nowrap;
position:absolute;
font-family: Verdana;
font-size: 14px;
font-style: oblique;
}
.scrollingtext a:link, a:visited {
font-family: Verdana;
color: #ffffff;
font-size: 14px;
}
.scrollingtext a:visited {
text-decoration:none;
}
JavaScript
$(document).ready(function () {
//this is the useful function to scroll a text inside an element...
function startScrolling(scroller_obj, velocity, start_from) {
//bind animation inside the scroller element
scroller_obj.bind('marquee', function (event, c) {
//text to scroll
var ob = $(this);
//scroller width
var sw = parseInt(ob.parent().width());
//text width
var tw = parseInt(ob.width());
//text left position relative to the offset parent
var tl = parseInt(ob.position().left);
//velocity converted to calculate duration
var v = velocity > 0 && velocity < 100 ? (100 - velocity) * 1000 : 5000;
//same velocity for different text's length in relation with duration
var dr = (v * tw / sw) + v;
//is it scrolling from right or left?
switch (start_from) {
case 'right':
//is it the first time?
if (typeof c == 'undefined') {
//if yes, start from the absolute right
ob.css({
left: sw
});
sw = -tw;
} else {
//else calculate destination position
sw = tl - (tw + sw);
};
break;
default:
if (typeof c == 'undefined') {
//start from the absolute left
ob.css({
left: -tw
});
} else {
//else calculate destination position
sw += tl + tw;
};
}
//attach animation to scroller element and start it by a trigger
ob.animate({
left: sw
...