animation marquee like: animation + attr data-

dabblet.css

/* animation marquee like: animation + attr data- */
 div {text-align:center;}
 p , article{display:inline-block;margin:3em auto;border:double;background:orange;padding:5px 0;
 position:relative;overflow:hidden;table-layout:fixed; box-shadow:0 0 15px green}
 strong {display:block;animation:linear  marqueelike 12s infinite ;margin-left:-100%;padding:0 5px;text-align:left;}
 strong:after {content:attr(data-text);position:absolute;white-space:nowrap;padding-left:10px;}
 @keyframes marqueelike {
 0%, 100% {margin-left:0;}
 99.99% {margin-left:-100%;}
 }
 /* animation marquee like :image + content + url() */
 article { padding:0;display:block;width:50px;height:200px;float:left;}
 figure {margin:0;padding:0;display:block;animation: marqueeliketop 10s infinite linear;}
 /* on rinjecte 200px de contenu, les 4 premiere images pour boucler la boucle */
 figure:after {content:  url(http://lorempixel.com/50/50/nature/1)url(http://lorempixel.com/50/50/food/1)url(http://lorempixel.com/50/50/sports/1) url(http://lorempixel.com/50/50/city/1) ;line-height:0;display:block;  }
 img {display:block;}
 @keyframes marqueeliketop {
 0%, 100% {margin:0;}
 99.99% {margin-top:-500px;}/* 10images */
 }
 section {width:300px;margin:auto;overflow:hidden;
 box-shadow:0 0 3px,inset 0 0 50px;}
 section:hover {font-size:1.25em;transition:1s;padding-top:1em}
 section:hover div {text-shadow: 300px -1.2em #333 ;}
 section div {text-align:justify;padding : 5px;text-shadow: 300px 0 #333 ;
 display:inline-block;width:290px;animation: marqueelike 4s infinite;}
 h1 {text-align:center;text-shadow:0 0 5px gold;display:block;margin:auto;overflow:hidden;width:30.25em;position:relative;background:linear-gradient(0deg, #5af,#fff,turquoise);border-radius:5px;box-shadow:0 0 5px}
 h1 em {display:block;white-space:nowrap;animation: marqueelike 2s infinite linear;box-shadow:0 0 3px gold, inset 0 0 3px gold;width:100%}
 h1 em:after {content:'Ceci est juste une illusion qui vous fonce dessus à la vitesse de la lumiere.';position:absolute;box-shadow:-12px 0 0 -8px red, 0 0 3px gold, inset 0 0 3px gold}

dabblet.html

<div>
	<p>
		<strong data-text=" Le principe est de reinjecter un mirroir du debut du contenu visible dans la largeur de l'élément défilant.">
			Le principe est de reinjecter un mirroir du debut du contenu visible dans la largeur de l'élément défilant.
		</strong>
	</p>
</div>

<article>
<figure>
<img src="http://lorempixel.com/50/50/nature/1" />
<img src="http://lorempixel.com/50/50/food/1" />
<img src="http://lorempixel.com/50/50/sports/1" />
<img src="http://lorempixel.com/50/50/city/1" />
<img src="http://lorempixel.com/50/50/abstract/1" />
<img src="http://lorempixel.com/50/50/technics/1" />
<img src="http://lorempixel.com/50/50/people/1" />
<img src="http://lorempixel.com/50/50/transport/1" />
<img src="http://lorempixel.com/50/50/fashion/1" />
<img src="http://lorempixel.com/50/50/nightlife/1" />
</figure></article>
<section>
<div>Et voici un texte qui est cloner uniquement via CSS pour un defilement 
continue.Il n'y a pas d'<code>attribut</code>, pas de <code>span</code> en plus ... 
pas une ombre d'element ou texte en plus dans le HTML.<br/>
<b>Survolez moi</b>.<br/>
Le <code>font-size</code> ne m'indispose pas ! et vous ?<br/>
<em>En multipliant les ombres</em> decallés et <em>en augmentant le deplacement lateral</em>
 en consequences, on peut faire 
 defilé l'ensemble du texte sur une seule ligne . 
</div>
</section>
<h1>bling bling, Ceux-ci ne sont pas des &lt;marquee&gt;.<em>Ceci est juste une illusion qui vous fonce dessus à la vitesse de la lumiere.</em></h1>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"result"}