infinite slide

by jeum

HTML

<div id="container">
    <div id="boat">
        <div class="module">
            <svg version="1.1" class="svgIcon" xmlns="http://www.w3.org/2000/svg" viewBox="-4 -5 16 16">
                <polygon points="8,3 5,3 5,0 0,0 0,10 8,10 "/>
                <polygon points="8,3 5,0 5,3 "/>
            </svg>
        </div>
    </div>
</div>
<input type="button" value="&middot;&middot;&middot;" id="go"/>

CSS

#container {
    /* N * M     > le 1er élément apparait à droite */
    /* (N-1) * M > défilement continu */
    width: 144px;
    height: 78px;
    overflow: hidden;
}
#container #boat {
    /* (N+1) * M > saut de ligne si inférieur */
    width: 240px;
    height: 100%;
    position: relative;
    animation-name: module;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
@keyframes module {
    0%  {right:0px;}
    100%   {right:48px;}       /* largeur M */
}

.module {
    position: relative;
    float: left;
    width: 48px;                /* largeur M */
    height: 100%;
    
/* Rappel : les styles SVG peuvent être placés dans le container ou dans le svg */
    stroke: #EEE;              /* SVG: couleur tracés */

    text-align: center;
    color: #EEE;
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    font-weight: bold;
    background-color: #222;
}
.svgIcon {
    stroke-width : 0.8px;      /* SVG: épaisseur de ligne (avant scale) */
    stroke-linejoin: round;    /* SVG: type de jointure */
    fill: none;                /* SVG: couleur de remplissage */
}

JavaScript

// init
var INPUT = 'STL OBJ BLEND CTM'.split(' ');		// N = nombre d'éléments
var anim = document.getElementById('boat');
var modl = anim.firstElementChild;
for( var i = 0 ; i < INPUT.length ; i++ )
{
    var item = modl.cloneNode(true);
    var text = document.createTextNode(INPUT[i]);
    item.appendChild(text);
    anim.appendChild(item);
}
anim.removeChild(modl);

// animation
var swap = function()
{
    var train = anim.getElementsByTagName('div');
    var last = train[0];
    anim.removeChild(last);
    anim.appendChild(last);
}
anim.addEventListener("animationiteration", swap, false);

// play/pause
var play = function()
{
    if( anim.style.animationPlayState === "paused" )
        anim.style.animationPlayState = "running";
    else
        anim.style.animationPlayState = "paused";
}
document.getElementById('go').addEventListener('click', play, false);