Creating A Marquee Using Anything? Javascript, Jquery, Css

I'm trying to build a blog using HTML and CSS. Now I've integrated API's for certain stocks using PHP and using the data I've created multiple widgets. Now I'm trying to create a m

Solution 1:

You can use simple html <marquee> tag for infinite moving.

See example:

#container-table, #container-tablel, #container-tabled, #container-tablee, #container-tablex {
    float: left;
    padding: 020px00;
}

<divclass="container1"><marquee><divid="container-table">test</div><divid="container-tablel">test1</div><divid="container-tabled">test2</div><divid="container-tablee">test3</div><divid="container-tablex">test4</div></marquee></div>

Solution 2:

Try this

This is continuous marquee

// polyfillwindow.requestAnimationFrame = (function(){
  returnwindow.requestAnimationFrame       ||
          window.webkitRequestAnimationFrame ||
          window.mozRequestAnimationFrame    ||
          function( callback ){
            window.setTimeout(callback, 1000 / 60);
          };
})();

var speed = 5000;
(functioncurrencySlide(){
    var currencyPairWidth = $('.slideItem:first-child').outerWidth();
    $(".slideContainer").animate({marginLeft:-currencyPairWidth},speed, 'linear', function(){
                $(this).css({marginLeft:0}).find("li:last").after($(this).find("li:first"));
        });
        requestAnimationFrame(currencySlide);
})();

.slider{
    width:100%;
    overflow:hidden;
    position:relative;
    margin:0;
}
.edge{
    left:0;
    right:0;
    top:0;
    bottom:0;
    position:absolute;
    height:100%;
    display:block;
}
.edge:before{
    content:'';
    position:absolute;
    left:0;
    background:-webkit-linear-gradient(left, white 10%, rgba(0,0,0,0) 100%);
    width:25%;
    height:100%;
}
.edge:after{
    content:'';
    position:absolute;
    right:0;
    background:-webkit-linear-gradient(right, white 10%, rgba(0,0,0,0) 100%);
    width:25%;
    height:100%;
}
ul{
    background:#ddd;
    overflow:hidden;
    width:1000%;
    margin:0;
}
li{
    list-style:none;
    display:inline-block;
    padding:050px;
}

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass='slider'><divclass="edge"></div><ulclass="slideContainer"id="money_start"><liclass="slideItem" >
                EUR
        </li><liclass="slideItem">
                USD
        </li><liclass="slideItem">
                JPY
        </li><liclass="slideItem">
                CNY
        </li><liclass="slideItem">
                VD
        </li><liclass="slideItem">
                GBP
        </li><liclass="slideItem">
                AUD
        </li><liclass="slideItem">
                CAD
        </li><liclass="slideItem">
                CHF
        </li><liclass="slideItem">
                XAU
        </li></ul></div>

Solution 3:

The NSE site is using custom-stock-ticker (A Word Press Plugin). A good place to start there is looking at stock_ticker_script.js.