UC Ticker

by Felipe Alfaro

HTML

<div class="uc-ticker">
	<div class="uc-ticker-track">
        <div class="uc-ticker-group">
	        <div class="uc-ticker-item">
	            <a href="/tickets">TICKETS ON SALE NOW</a>
	        </div>
            <div class="uc-ticker-item">
	            JUST ANNOUNCED: INSTALLATIONS FROM GRIMES AND THE 1975 ADDED TO UNDERCURRENT
	        </div>
        </div>
	</div>
</div>

<div class="uc-ticker" style="display: none;">
	<div class="uc-ticker-track">
        <div class="uc-ticker-group">
	        <div class="uc-ticker-item">
	            Some text 1
	        </div>
            <div class="uc-ticker-item">
	            Some text 2
	        </div>
            <div class="uc-ticker-item">
	            Some text 3
	        </div>
            <div class="uc-ticker-item">
	            Some text 4
	        </div>
            <div class="uc-ticker-item">
	            Some text 5
	        </div>
            <div class="uc-ticker-item">
	            Some text 6
	        </div>
            <div class="uc-ticker-item">
	            Some text 7
	        </div>
        </div>
	</div>
</div>

CSS

@keyframes ucTicker {
    100% {
        transform: translateX(-100%);
    }
}

.uc-ticker {
    position: fixed;
    bottom: 0;
    left: 0;
    min-height: 30px;
    background: black;
    width: 100%;
    overflow: hidden;
}

.uc-ticker .uc-ticker-track {
    display: block;
    position: relative;
    white-space: nowrap;
    min-width: 100%;
}

.uc-ticker .uc-ticker-track .uc-ticker-group {
    display: inline-block;
    min-width: 100%;
    box-sizing: border-box;
}

.uc-ticker .uc-ticker-track .uc-ticker-group .uc-ticker-item {
    display: inline-block;
    margin: 0 30px;
    color: white;
}

.uc-ticker.uc-ticker-animated .uc-ticker-track .uc-ticker-group {
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-name: ucTicker;
    animation-name: ucTicker;
    -webkit-animation-duration: 30s;
    animation-duration: 30s;
}

JavaScript

document.addEventListener('DOMContentLoaded', function () {
    var ticker = document.querySelector('.uc-ticker');
  
    if (ticker) {
        var tickerGroup = ticker.querySelector('.uc-ticker-group');

        if (tickerGroup) {
            var tickerItems = tickerGroup.querySelectorAll('.uc-ticker-item');
            var widthStep = 0;
            var width = 0;

            Array.prototype.forEach.call(tickerItems, function (tickerItem) {
                width = width + tickerItem.offsetWidth;
            });

            widthStep = width;

            var fixGroup = function () {
                if (width < window.innerWidth) {
                    width = width + widthStep;

                    Array.prototype.forEach.call(tickerItems, function (tickerItem) {
                        tickerGroup.appendChild(tickerItem.cloneNode(true));
                    });

                    fixGroup();
                }
            }

            fixGroup();



            tickerGroup
                .parentElement
                .insertBefore(
                tickerGroup.cloneNode(true),
                tickerGroup
            );

            ticker.classList.add('uc-ticker-animated');
        }
    }
});