javascript marquee example, JavaScript Marquee, horizontal scroller text using Jquery, Jquery tutorial to create Marquee effect, simple Jquery tmple Jquery to o create Marquee, horizontal ticker using jquery

Marquee is nice and useful feature for New news and promotions of website for which most of designer and Developers are used marquee tag and its attributes.

Now these days web accessibility is become must for websites due to make website GOOGLE friendly. So google can easily crawl them.

But according to W3C Marquee is not more with HTML tag family it shows error in W3C validation.

after searching long time to web I found the REPLACEMENT of Marquee using JQUERY and this information I would like to share with my designer and Developer friends using this Post.

Its very simple to use and implement into our website whether its Dynamic or static.

HTML CODE

<ul id='ticker02'>

 <li><a href="#">Hello 1</a></li>
 <li><a href="#">Hello 2</a></li>
 <li><a href="#">Hello 3</a></li>
 <li><a href="#">Hello 4</a></li>
 <li><a href="#">Hello 5</a></li>

</ul>

<script type="text/javascript" language="javascript"> 
//<![CDATA[ 
$(function(){ $("ul#ticker02").liScroll({travelocity: 0.03}); }); 
//]]> 
    </script>

CSS CODE

.tickercontainer {

    line-height: 30px;

    margin: 0;

    overflow: hidden;

    padding: 0;

}

.tickercontainer .mask {

    left: 10px;

    overflow: hidden;

    position: relative;

    width: 950px;

    z-index: 1;

}

ul.newsticker {

    left: 750px;

    list-style-type: none;

    margin: 0;

    padding: 0;

    position: relative;

    z-index: 1;

}

ul.newsticker li {

    float: left;

    margin: 0;

    padding: 0;

    z-index: 1;

}

ul.newsticker a {

    color: #000;

    margin: 0 50px 0 0;

    padding: 0;

    white-space: nowrap;

}

ul.newsticker span {

    margin: 0 10px 0 0;

}

Now just need to add two Script file URL given Below you can save them too.
https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js
https://www.obcindia.co.in/obcnew/site/common/css/jquery.li-scroller.1.0.js