infinite slide (objet)

by jeum

HTML

<div id="container"></div>

CSS

#container {
    width: 144px;                /* (N-1) * M > défilement continu */
    height: 78px;
    overflow: hidden;
    
    stroke: #EEE;              /* SVG: couleur tracés */
    color: #EEE;
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    font-weight: bold;
    
    background-color: #222;
    animation-play-state: paused;
}
#container :hover{
    animation-play-state: running;
}

.animSlider {
    position: relative;
    height: 100%;
    animation-name: module;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-play-state: inherit;
}
.animModule {
    position: relative;
    float: left;
    width: 48px;                /* largeur M */
    height: 100%;
    text-align: center;
}
@keyframes module {
    0%  {right:0px;}
    100%   {right:48px;}       /* largeur M */
}

JavaScript

var slider = function (parent, tags)
{
    var svg = '<svg version="1.1" class="svgIcon" xmlns="http://www.w3.org/2000/svg" viewBox="-4 -5 16 16" stroke-width="0.8px" stroke-linejoin="round" fill="none";><polygon points="8,3 5,3 5,0 0,0 0,10 8,10 "/><polygon points="8,3 5,0 5,3 "/></svg>';
    var wid = 48; // largeur de module en px déclaré dans css
    
    var INPUT = tags.split(' ');
    var count = INPUT.length;
    
    // init
    var anim = document.createElement('div');
    anim.setAttribute('class', 'animSlider');
    // dimensionement selon wid
    anim.style.width = wid * ( count + 1 ) + 'px';
    for( var i = 0 ; i < count ; i++ )
    {
        var mod = document.createElement('div');
        mod.setAttribute('class', 'animModule');
        mod.innerHTML = svg + INPUT[i];
        anim.appendChild(mod);
    }
    parent.appendChild(anim);
    
    // animation
    var swap = function()
    {
        var last = anim.children[0];
        anim.removeChild(last);
        anim.appendChild(last);
    }
    anim.addEventListener("animationiteration", swap, false);
}

new slider( document.getElementById('container'), 'STL OBJ BLEND CTM' );