Ефект танцюючий текст

ПублікаціїАнімації і ефекти

Ефект тексту "танцюючий текст" в якому символи тексту роблять "хвилю" на подобі вболівальників футболу на стадіоні :-) .

Для реалізації отримуємо текст від вказаного елемента методом innerText. Створюємо масив mas з елементами span для кожного символу в тексті і замінюємо кожний символ на span елемент. Функція Jump поступово піднімає символи (елементи span) за допомогою Element.style.

Ефект "танцюючий текст" на JavaScript.
jumpText=function(el){ function Jump(pos){ for(var i=0;i<mas.length;i++){ switch(i-pos){ case 0: case 6: mas[i].style.top='-3px'; break; case 1: case 2: mas[i].style.top='-5px'; break; case 3: case 5: mas[i].style.top='-7px'; break; case 4: mas[i].style.top='-9px'; break; default: mas[i].style.top='0px'; break; } } pos++; if(pos>=mas.length)pos=0; setTimeout(Jump,50,pos); } el=document.querySelector(el); var mas=[],text=el.innerText; el.innerText=''; for(var i=0;i<text.length;i++){ mas[i]=document.createElement('span'); mas[i].innerText=text[i]; mas[i].style.position='relative'; el.appendChild(mas[i]); } Jump(0); } jumpText('#test');

Додаємо ще зворотню хвилю а також зміщення першого і останнього символу вліво, і в право.

Ефект "танцюючий текст" на ДжаваСкрипт :-)
jumpText2=function(el){ function leftJump(left,z){ if(left==undefined)left=0; mas[0].style.left=left+'px'; left=(z?left+1:left-1); if(left<-10)z=true; if(left<0)setTimeout(leftJump,50,left,z); else Jump(-6); } function rightJump(right,z){ if(right==undefined)right=0; mas[mas.length-1].style.right=right+'px'; right=(z?right+1:right-1); if(right<-10)z=true; if(right<0)setTimeout(rightJump,50,right,z); else Jump(mas.length-1,true); } function Jump(pos,z){ for(var i=0;i<mas.length;i++){ switch(i-pos){ case 0: case 6: mas[i].style.top='-3px'; break; case 1: case 2: mas[i].style.top='-5px'; break; case 3: case 5: mas[i].style.top='-7px'; break; case 4: mas[i].style.top='-9px'; break; default: mas[i].style.top='0px'; break; } } if(z)pos--; else pos++; if(pos>mas.length){rightJump();} else if(pos<-7){leftJump();} else setTimeout(Jump,50,pos,z); } el=document.querySelector(el); var mas=[],text=el.innerText; el.innerText=''; for(var i=0;i<text.length;i++){ mas[i]=document.createElement('span'); mas[i].innerText=text[i]; mas[i].style.position='relative'; el.appendChild(mas[i]); } leftJump(); } jumpText2('#test2');

Якщо елемент el містить вбудовані елементи то отримавши їх текст вони видалялися. Реалізуємо функцію nodeText яка буде замінювати текст на елемент span з одним символом тексту не видаляючи внутрішні елементи:

Ефект "танцюючий текст" на ЯваСкрипт.
jumpText3=function(el){ function leftJump(left,z){ if(left==undefined)left=0; mas[0].style.left=left+'px'; left=(z?left+1:left-1); if(left<-10)z=true; if(left<0)setTimeout(leftJump,50,left,z); else Jump(-6); } function rightJump(right,z){ if(right==undefined)right=0; mas[mas.length-1].style.right=right+'px'; right=(z?right+1:right-1); if(right<-10)z=true; if(right<0)setTimeout(rightJump,50,right,z); else Jump(mas.length-1,true); } function Jump(pos,z){ for(var i=0;i<mas.length;i++){ switch(i-pos){ case 0: case 6: mas[i].style.top='-3px'; break; case 1: case 2: mas[i].style.top='-5px'; break; case 3: case 5: mas[i].style.top='-7px'; break; case 4: mas[i].style.top='-9px'; break; default: mas[i].style.top='0px'; break; } } if(z)pos--; else pos++; if(pos>mas.length){rightJump();} else if(pos<-7){leftJump();} else setTimeout(Jump,50,pos,z); } function nodeText(el){ var nodes=el.childNodes; for(var i=0,span;i<nodes.length;i++) switch(nodes[i].nodeName){ case '#text': span=document.createElement('span'); text=nodes[i].nodeValue; for(var j=0,l;j<text.length;j++){ l=mas.length; mas[l]=document.createElement('span'); mas[l].innerText=text[j]; mas[l].style.position='relative'; span.appendChild(mas[l]); } el.replaceChild(span,nodes[i]); break; case 'IMG': case 'SCRIPT': case 'STYLE': continue; break; default: nodeText(nodes[i]); break; } } el=document.querySelector(el); var mas=[]; nodeText(el); leftJump(); } jumpText3('#test3');
Адмін 2017-10-15 17:54:50

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