» »

Анимированный эффект для текста на CSS

Анимированный эффект для текста на CSS

Оригинальная сборка букв или знаков, что созданы на чистом CSS, где каждый знак имеет свой оттенок цвета, которые можно распределить для показа или появление. Если вы искали новые способы разделить буквы под анимацию или разбить слова и потом красиво собрать в заданное предложения. То этот эффект отлично подойдет, чтоб при открытие сайта он был сразу замечен.

Здесь изначально заданы разделители на символ, слово и есть возможность на предложение с элементами, которые можно использовать для точного разделения текста на вашей странице. Как видим, что здесь включено типографическая анимация, которая самостоятельно редактируется, как по знакам, так и по появлению, что включает в себя скорость и все эффекты.

Здесь можно просматреть появление знаков:

1

Анимированный текст

2

Как сделать анимированный текст

3

CSS-эффект для текста

Приступаем к установке:

HTML

Код
<div>
  ZorNet.Ru: Создание сайта на uCoz
</div>

JavaScript

Код
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);

CSS

Код
body {
  background: #041619;
  text-align: center;
  color: #f5edf5;
  font-size: 29px;
  font-family: 'Roboto',Arial;
  font-weight: 300;
  color: #bbc;
}

div {
  position: relative;
  height: calc( 90vh - 50px);
  transform: translateY(40%);
}

span {
  display: inline-block;
  transition: all ease 0.8s;
  opacity: 0;
  min-width: 9px;
}

Демонстрация
2018-04-25 Просмотров: 401 Комментарий: (0)

Поделиться в социальных сетях

Материал разместил

Комментарий: 0
avatar