Ефект тексту "прилітаючі символи" представляє собою розділення тексту елементу на окремий елемент з одним символом. Кожен символ "розкидається" по документу і поетапно "повертається" на початкову позицію. Від чого і з'являється ефект що символи "прилітають" для формування речення. На подобі плагіну GreenSock і SplitText але без "важких" плагінів.
Реалізовуємо ефект "прилітаючі символи" за допомогою стилю CSS3 transform:
Приклад показу тексту за допомогою ефекту прилітаючих символів.
kiteText=function(el,time){
function random(min,max){return parseInt(Math.random()*(max-min))+min;}
el=document.querySelector(el);
if(!time)time=5000;
var text=el.innerText;
el.innerHTML='';
for(var i=0,span;i<text.length;i++){
span=document.createElement('span');
if(text[i]==' ')span.innerHTML=' ';
else{
span.innerText=text[i];
span.style.display='inline-block';
span.animate([{transform:'translateX('+random(window.innerWidth*-1-100,window.innerWidth+100)+'px) translateY('+random(window.innerHeight*-1-100,window.innerHeight+100)+'px)'},{transform:'none'}],{duration:random(time-(time/2),time+(time/2)),fill:'forwards'});
}
el.appendChild(span);
}
}
kiteText('#test9',5500);
Зверніть увагу що дана аніміція тексту дає сутєві навантаження на браузер, особливо коли великий розмір тексту.