В статье рассмотрим, как можно анимироваить текст, где изначально видим несколько написанных слов, которые идут под разной гаммой цвета. Где в один миг идет полный разброс по знакам, и через какое то короткое время они опять корректно собираются.
В разбросе:
В горизонтальном положение:
HTML
Код
<div>Классный текстовый эффект...</div>
CSS
Код
div {
position: relative;
height: calc( 100vh - 60px);
transform: translateY(50%);
}
span {
display: inline-block;
transition: all ease 0.9s;
opacity: 0;
min-width: 10px;
}
JS
Код
function _(x) {
return document.querySelectorAll(x);
}
function r(min=0,max=0) {
return min + Math.round(Math.random() * (max-min));
}
//wrap each letter with <span>
_('div')[0].innerHTML = ('<span>' + _('div')[0].innerHTML.trim().split('').join('</span><span>') + '</span>');
var frame = 0;
setInterval(function() {
if(frame%4==0)
for(var i = 0; i < _('span').length; i++)
{
_('span')[i].style.opacity = 0;
_('span')[i].style.color = '#' + r(3,9) + r(3,9) + r(3,9);
_('span')[i].style.transform = 'translate3d(' + r(-150) + 'px, ' + r(-150) + 'px, 0px) rotate(' + r(-30,30) + 'deg)';
}
else if(frame%4==3)
for(var i = 0; i < _('span').length; i++)
{
_('span')[i].style.opacity = 0;
_('span')[i].style.transform = 'translate3d(' + r(150) + 'px, ' + r(150) + 'px, 0px) rotate(' + r(-30,30) + 'deg)';
}
else
for(var i = 0; i < _('span').length; i++)
{
_('span')[i].style.transform = '';
_('span')[i].style.opacity = 1;
}
frame++;
}, 1050);
Демонстрация
