Marquee is a text which is seen floating from right to left or left to right , top to bottom or bottom to top depending on the code . Before we can created marquee effect by simply using <marquee> tag of html as this html tag is not supported by different browser so now this tag has been depreciated we cant use this tag.

In this blog i am explaining how to create marquee effect by using jquery.

For using this effect we have to put below code in our file.

Below is jquery :-

var valmarquee = $('div.marquee-wrapper');
console.log(valmarquee);
valmarquee.each(function() {
    var marq = $(this),indent = marq.width();
    marq.valmarquee = function() {
        indent--;
        marq.css('text-indent',indent);
        if (indent < -1 * marq.children('div.marquee-content').width()) {
            indent = marq.width();
        }
    };
    marq.data('interval',setInterval(marq.valmarquee,16));
});

 In above  jquery code variable valmarquee contains the whole outer div element.

In each() variable marq contains the current inside element i.e marquee-content and indent contains the width of this element.

Now in marq.valmarquee we have called the function that performs the marquee functionality i.e moving text from left to right . Inside the function we are decreasing the indent value by 1 and changing the CSS "text-indent" of the inside element to the current indent value , this loop will continue to run until the value of indent become less than  the width of  its children and indent value is reset to the original value again i.e width of the outer element . 

marq.data('interval',setInterval(marq.marquee,)); :- by using data function we are attaching setinterval function to the div called marq, and setinterval function is  repeating the whole process after time duration of 16 millisec .

HTML of this code is given below :-

<div class='marquee-wrapper'>
    <div class='marquee-content'>
       Marquee functionality working fine. :)
    </div>
</div>

CSS is given below for above HTML code:-

div.marquee-wrapper {
    white-space:no-wrap;
    overflow:hidden;
}
div.marquee-wrapper > div.marquee-content {
    white-space:nowrap;
    display:inline;
    width:auto;

Working demo :- http://jsfiddle.net/h986hh4y/5/