Marquee

by LostInDaJungle

HTML

<div id="display">
  <p id="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non magna ut orci pretium molestie. ही मार्क्वी खूपच कूल आहे!!!</p>
</div>

CSS

*{margin:0; padding:0;}
#display{
  background:hsla(210,100%,50%,1);
  height:60px;
  width:500px;
  overflow:hidden;
  position:relative;
}
#text{
  background:hsla(90,100%,50%,.5);
  cursor:pointer;
  overflow:hidden;
  position:relative;
  left:10px;
  margin-right:10px;
  top:10px;
}

JavaScript

function marquee(a, b) {
    var width = b.width();
    var start_pos = a.width();
    var end_pos = -width;

    function scroll() {
        if (b.position().left <= -width) {
            b.css('left', start_pos);
            scroll();
        }
        else {
            time = (parseInt(b.position().left, 10) - end_pos) *
                (10000 / (start_pos - end_pos)); // Increase or decrease speed by changing value 10000
            b.animate({
                'left': -width
            }, time, 'linear', function() {
                scroll();
            });
        }
    }

    b.css({
        'width': width,
        'left': start_pos
    });
    scroll(a, b);
    
    b.mouseenter(function() {     // Remove these lines
        scroll(a, b);
                   // if you don't want
    });                           //
    b.mouseleave(function() {     // marquee to pause
        b.stop();                 //
        b.clearQueue();                     //
    });                           // on mouse over
    
}

$(document).ready(function() {
    marquee($('#display'), $('#text'));  //Enter name of container element & marquee element
});