Nozomi Jittery Text Effect
HTML
<!-- Twitter @_anesena -->
<span class="jiterry">Nozomi Tojo.</span>
CSS
body{font:400 95px/1em Amatic SC;text-align:center;padding-top:140px}
.jiterry span{animation:jitter 200ms linear infinite;color:#443B66;display:inline-block}
@keyframes jitter{ 50%{transform:skewY(1.7deg) skewX(-1.7deg) scale(1.006);} }
body{
background: url("http://i.schoolido.lu/cards/transparent/61idolizedTransparent.png")no-repeat;
background-attachment: fixed;
background-size: 50%;
background-position: right bottom;
}
JAVASCRIPT
$(function(){
var $jittery = $('.jiterry'),
aText = $jittery.text().split(''),
letters = '';
for(var i = 0; i < aText.length; i++){
letters += '<span>'+aText[i]+'</span>';
}
$jittery.empty().append(letters);
$.each($('span', $jittery), function(i){
$(this).css('animation-delay', '-'+i+'70ms');
});
});
