Анимированный эффект для текста на CSS
 | |
| Оригинальная сборка букв или знаков, что созданы на чистом CSS, где каждый знак имеет свой оттенок цвета, которые можно распределить для показа или появление. Если вы искали новые способы разделить буквы под анимацию или разбить слова и потом красиво собрать в заданное предложения. То этот эффект отлично подойдет, чтоб при открытие сайта он был сразу замечен. Здесь изначально заданы разделители на символ, слово и есть возможность на предложение с элементами, которые можно использовать для точного разделения текста на вашей странице. Как видим, что здесь включено типографическая анимация, которая самостоятельно редактируется, как по знакам, так и по появлению, что включает в себя скорость и все эффекты. Здесь можно просматреть появление знаков: 1  2  3  Приступаем к установке: 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; } Демонстрация | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 0 | |