Ticker Test

by shanejones

HTML

<div class="ticker">
    <ul>
        <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
        <li>Repellendus harum mollitia sapiente laudantium iste quisquam ab architecto</li>
        <li>Voluptas autem quam nihil molestiae incidunt ipsa veritatis recusandae eos nam fugiat maxime.</li>
    </ul>
</div>

SCSS

.ticker {
    position: absolute;
    bottom: 0;
    left: 0;
    overflow: hidden;
    width: 100%;
    
    ul {
        position: relative; 
        margin: 0;
        padding:0;
        display: inline;
        white-space: nowrap
        
        li {
             list-style: none;
             display: inline-block;
             white-space: nowrap;
                    
             padding: 10px 20px;
                    
        }
       
    }
        
}

JavaScript

// use data-speed etc for params



// store items
var ticker_content = $('.ticker ul').html();


//calculate length of ul values
var ticker_length = 0;

$('.ticker li').each(function(){
    ticker_length += $(this).outerWidth();
})

// double the length
$('.ticker ul').append(ticker_content)


// add inside a set timeout
var l = 0;
setInterval(function () {

// if left -- == total length of <ul>
// remove ul and add length of <ul> on to the left value
    
    if(Math.abs(l)==ticker_length){
        console.log(l);
        console.log(ticker_length);
        
        l = 0;
    }
    
    l--;
    
    $('ul').css({
        left: l+'px'
    })
        
}, 5);