Ефекти для тексту

Друкування тексту

Ефект друкування (набирання, набору) тексту полягає у поетапному відображенні кожного символу тобто плавний показ тексту по буквам.

Реалізація ефекту друкування тексту за допомогою String.substring(), де отримуємо текст від 0 до вказаного індексу index і відображаємо його в елементі присвоївши властивості Element.innerText. Збільшуємо index на одиницю і повторно отримуємо текст через вказаний час:

//функція ефекту друку
textDruk=function(el,text,index){
if(index==undefined || index>=text.length)index=0;
el.innerText=text.toString().substring(0,index);
setTimeout(textDruk,150,el,text,index+1);
}

//виклик функції ефекту друку
textDruk(document.getElementById('test_dr'),'Приклад ефекту друкування тексту.');

Ефект друкування тексту з курсором:

textPrint=function(el,text,index,cursor){
if(index==undefined || index>=text.length)index=0;
el.innerText=text.toString().substring(0,index)+(cursor?'|':'');
if(cursor)index++;
setTimeout(textPrint,75,el,text,index,!cursor);
}

textPrint(document.getElementById('test_dr2'),'Приклад ефекту друкування тексту.');

Ефект друкування тексту з курсором за допомогою анімації:

textPrint2=function(el,text){
function efect(el,text,index){
if(index==undefined || index>=text.length)index=0;
el.innerHTML=text.toString().substring(0,index);
setTimeout(efect,150,el,text,index+1);
}
var span=document.createElement('span');
el.appendChild(span);
var cursor=document.createElement('span');
cursor.innerText='|';
cursor.animate({opacity:[1,0]},{duration:500,iterations:Infinity});
el.appendChild(cursor);
efect(span,text);
}

textPrint2(document.getElementById('test_dr3'),'Приклад ефекту друкування тексту.');

Ефект друкування тексту з анімацією останнього символа:

textDrukAnime=function(el,text,index){
if(index==undefined || index>=text.length){
  index=0;
  el.innerHTML='';
}
var span=document.createElement('span');
span.innerText=text[index];
span.style.color='#ffffff';
el.appendChild(span);
  if(span.animate) //анімація елементу якщо підтримується браузером
     span.animate([{color:'#ffffff'},{color:'#000000'}],{id:new Date().getTime(),duration:1500,fill:'forwards'});
  else span.style.color='#000000';
setTimeout(textDrukAnime,150,el,text,index+1);
}

textDrukAnime(document.getElementById('test_dr_anm'),'Приклад ефекту друкування тексту.');

Появлення слів

Ефект появлення слів тексту полягає у розбиті тексту на масив слів методом String.split(' ') і показувати кожне слово за допомогою анімації елемента.

Приклад анімації появлення слів тексту:

textAnime=function(id,text,time){
function efect(el,mas,time){
  var span=document.createElement('span');
  span.style.color='#ffffff';
  span.innerText=mas[0]+' ';
  if(span.animate) //анімація елементу якщо підтримується браузером
     span.animate([{color:'#ffffff'},{color:'#000000'}],{duration:time,fill:'forwards'});
  else span.style.color='#000000';
  el.appendChild(span);
  mas.shift();

  if(mas.length>0)setTimeout(efect,time,el,mas,time);
}
 efect(document.querySelector(id),text.split(' '),time);
}

textAnime('#test', "Приклад Web Animation API за допомогою JavaScript.", 800);

"Ефект лупи над текстом"

"Ефект лупи над текстом" полягає в збільшені розміру шрифту певного символу.

Для початку отримуємо поточний розмір шрифта у елементі за допомогою getComputedStyle(). Збільшуємо значення розміру певного символу(за індексом index), а також його сусідні символи але уже на менше число. Збільшуємо index і викликаємо подальше збільшення через певний час за допомогою setTimeout():

textLupa=function(id,text){
function efect(el,text,size,index){
  var s='';
  for(i=0;i<text.length;i++){
    if(index==i)s+='<span style="font-size:'+(size+7)+'px">'+text[i]+'</span>';
    else if(index==i-1 || index==i+1)s+='<span style="font-size:'+(size+4)+'px">'+text[i]+'</span>';
    else s+=text[i];
  }
  el.innerHTML=s;
  index++;
  if(index>text.length)index=0;
setTimeout(efect,75,el,text,size,index);
}
var elements=document.querySelector(id),
size=parseInt(getComputedStyle(elements)['fontSize']);
efect(elements,text,size,0);
}

textLupa('#test2','Ефекти тексту на JavaScript');

Сіяючий текст

Ефект сіяючого (відблискуючого) тексту реалізовуємо шляхом зміни кольору символу за вказаним індексом index, збільшуючи цей індекс через певний час. Появляється ефект "сяйва" яке рухається.

Ефекти тексту на JavaScript.

shiningText=function(el){
el=document.querySelector(el);
function efect(el,text,index){
  if(index>=text.length)index=0;
  el.innerHTML=text.substring(0,index-1)+'<span style="color:#bfbfbf">'+text.substring(index-1,index)+'</span><span style="color:#bfbfbf;">'+text.substring(index,index+1)+'</span><span style="color:9c9c9c;">'+text.substring(index+1,index+2)+'</span>'+text.substring(index+2);
  setTimeout(efect,75,el,text,index+1);
}
efect(el,el.innerText,0);
}

shiningText('#test3');

Коливання тексту

Ефект "коливання тексту" здійснюється за допомогою збільшення або зменшення розмірі тексту.

Ефект коливання

flucText=function(el){
function fluc(el,direct){
 var size=parseInt(el.style.fontSize);
 if(direct==true)size++;
 else size--;
 if(size>=46)direct=false;
 if(size<=10)direct=true;
 el.style.fontSize=size+'pt';
 setTimeout(fluc,75,el,direct);
}
el=document.querySelector(el);
el.style.fontSize=getComputedStyle(el)['fontSize'];
fluc(el,true);
}

flucText('#test4');

Коливання кожного символу тексту окремо створює ефект "коливання моря".

Для реалізації створюємо масив об'єктів рівний кількості символів (букв) в тексті елемента. Об'єкт в масиві містить властивість el - елемент span, direct - логічне значення чи збільшувати шрифт чи зменшувати, min - мінімальне значення шрифту, max - максимальне значення шрифту. Кожному елементу span присвоюємо один символ тексту елемен для якого застовується анімація. Циклічно проходимо масив і збільшуємо або зменшуємо розмір шрифта елемента span.

Ефекти тексту коливання як у морської води.

fluctuationText=function(el,time){
function efect(mas,time){
  for(i=0,size;i<mas.length;i++){
    size=parseInt(mas[i].el.style.fontSize);
    if(mas[i].direct==true){
      size++;
      if(size>=mas[i].max)
      mas[i].direct=false;
    }else{
      size--;
      if(size<=mas[i].min)
      mas[i].direct=true;
    }
    mas[i].el.style.fontSize=size+'px';
  }
  setTimeout(efect,50,mas);
}
el=document.querySelector(el);
var mas=[],text=el.innerText;
el.innerHTML='';
for(i=0,len=text.length,size=getComputedStyle(el)['fontSize'];i<len;i++){
  mas[i]={el:document.createElement('span'),direct:Math.random()>0.5,min:parseInt(Math.random()*(18-8)+8),max:parseInt(Math.random()*(42-24)+24)};
  mas[i].el.innerText=text[i];
  mas[i].el.style.fontSize=size;
  el.appendChild(mas[i].el);
}
efect(mas,time);
}


fluctuationText('#test5');

Щасливий текст

Ефект "щасливий текст" робить кожен символ тексту різного кольору.

Для реалізації ефекту створюємо для кожного символу елемент span і присвоюємо йому порядковий колір з переданого масиву кольорів colors. Також застовуємо анімацію для кожного елемента span якщо параметр anime дорівнює true. Зверніть увагу що анімація застосовується для кожного елемента(символа тексту) окремо і при великій кількості тексту потребує великі ресурси.

Приклад ефекту "щасливий текст" на JavaScript з анімацією.

Приклад ефекту "щасливий текст" на JavaScript без анімації.

happyText=function(el,colors,anime){
el=document.querySelector(el);
var text=el.innerText;
el.innerHTML='';
for(var i=0,j=0,span;i<text.length;i++,j++){
if(j>colors.length)j=0;
span=document.createElement('span');
span.style.color=colors[j];
if(text[i]==' ')span.innerHTML='&nbsp;';
else{
 span.innerText=text[i];
 if(anime){
   span.style.display='inline-block';
   if(Math.random()>0.5)span.animate([{transform:'none'},{transform:'translateY(-1px) rotate(-2deg)'},{transform:'translateX(-'+parseInt(Math.random()*3)+'px) rotate(-2deg)'},{transform:'translateY(1px) rotate(2deg)'},{transform:'translateY(1px) rotate(0deg)'}],{duration:600,iterations:Infinity});
   else span.animate([{transform:'none'},{transform:'translateY(2px) rotate(2deg)'},{transform:'translateX(1px) rotate(2deg)'},{transform:'translateY(-1px) rotate(-2deg)'},{transform:'translateY(-'+parseInt(Math.random()*3)+'px) rotate(0deg)'}],{duration:600,iterations:Infinity});
 }
}
el.appendChild(span);
}
}

happyText('#test6',['red','olive','blue','green'],true);
happyText('#test6_2',['red','olive','blue','green']); //без анімації

Такий ефект тексту можна застосовувати для слів:

Приклад ефекту "щасливі слова" на JavaScript.

happyWords=function(el,colors,anime){
el=document.querySelector(el);
var mas=el.innerText.split(' ');
el.innerHTML='';
for(var i=0,j=0,span;i<mas.length;i++,j++){
if(j>colors.length)j=0;
span=document.createElement('span');
span.style.color=colors[j];
span.innerText=mas[i];
if(anime){
   span.style.display='inline-block';
   span.style.width='auto';
   if(Math.random()>0.5)span.animate([{transform:'none'},{transform:'translateY(-1px) rotate(-2deg)'},{transform:'translateX(-'+parseInt(Math.random()*3)+'px) rotate(-2deg)'},{transform:'translateY(1px) rotate(2deg)'},{transform:'translateY(1px) rotate(0deg)'}],{duration:600,iterations:Infinity});
   else span.animate([{transform:'none'},{transform:'translateY(2px) rotate(2deg)'},{transform:'translateX(1px) rotate(2deg)'},{transform:'translateY(-1px) rotate(-2deg)'},{transform:'translateY(-'+parseInt(Math.random()*3)+'px) rotate(0deg)'}],{duration:600,iterations:Infinity});
}
el.appendChild(span);
span=document.createElement('span'); //створюємо "пробіл"
span.innerHTML='&nbsp;';
el.appendChild(span);
}
}

happyWords('#test7',['red','#3d3e3f','blue','green'],true);

Ефект тіні

Ефект тіні реалізовується за допомогою CSS стилю text-shadow.

Приклад змінюючого ефекту тіні для тексту:

textShadow=function(el,time){
el=document.querySelector(el);
var color=getComputedStyle(el)['color'];
function efect(el,time,index){
el.style.textShadow='0px '+parseInt(index/10)+'px '+index+'px '+color;
index=index+5;
if(index>el.clientHeight)index=0;
setTimeout(efect,time,el,time,index);
}
efect(el,time,0);
}

textShadow('#test8',500);

Адмін 2017-10-15 10:16:36

Тільки зареєстровані користувачі можуть писати коментарі.