JSFiddle - React, Tailwind, and code Playground

jitter links

by CBroe

HTML

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod <a><span>tincidunt</span></a> ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. <a><span>Duis autem vel eum iriure</span></a> dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio <a><span>dignissim</span></a> qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet <a><span>doming id quod</span></a> mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. <a><span>Investigationes demonstraverunt</span></a> lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. <a><span>Mirum est notare</span></a> quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per <a><span>seacula quarta</span></a> decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</p>
<p style="font-size:1.5em">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod <a><span>tincidunt</span></a> ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. <a><span>Duis autem vel eum iriure</span></a> dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio <a><span>dignissim</span></a> qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue...

CSS

a { color:#f90; white-space:nowrap; cursor:pointer; }
a span { display:inline-block; }
a:hover span { animation:jitter 1s linear infinite; }

@keyframes jitter...

JavaScript

/*function rand (min, max) {
    var factor = .01;
	return ((Math.floor(Math.random() * (max - min + 1)) + min) * factor).toFixed(2);
}

for(var i=0,o="",t=l=null; i<101; ++i) {
    //o += i+"%{top:"+rand(-100,100)+"em;left:"+rand(-100,100)+"em;}";
    o += i+"%{transform:translate("+rand(-100,100)+"em,"+rand(-100,100)+"em)}\n";
}
console.log(o);*/