• Страница 1 из 1
  • 1
Форум » Веб-разработка » Скрипты для сайтов » Анимация разброса текста на анимации CSS3 (Анимация текста и объектов при помощи стилей CSS)
Анимация разброса текста на анимации CSS3
Kosten
Дата: Вторник, 2019-10-29, 22:38 | Сообщение 1
Оффлайн
Администраторы
Сообщений:25086
Награды: 57


В статье рассмотрим, как можно анимироваить текст, где изначально видим несколько написанных слов, которые идут под разной гаммой цвета. Где в один миг идет полный разброс по знакам, и через какое то короткое время они опять корректно собираются.

В разбросе:



В горизонтальном положение:



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);

Демонстрация
Прикрепления: 3945840.png(16.7 Kb) · 6834927.png(11.9 Kb)
Страна: (RU)
Форум » Веб-разработка » Скрипты для сайтов » Анимация разброса текста на анимации CSS3 (Анимация текста и объектов при помощи стилей CSS)
  • Страница 1 из 1
  • 1
Поиск: