Интересная анимация для текста, которая имитирует хаотичное движение линий. Например, подойдет для оформления заголовков любом сайте.
Чтобы подключить анимацию необходимо скопировать HTML разметку, CSS стилизацию и JS скрипт,
который генерирует движение линий по математической формуле.
Чтобы анимация работала должна быть подключена библиотека jquery перед закрывающим тегом body и перед подключением других скриптов.
HTML разметка
<div class="textcontainer"> <span class="particletext lines"><b>Линии</b></span> </div>
CSS оформление
body .textcontainer { padding: 40px 0; text-align: center; } body .particletext { text-align: center; font-size: 48px; position: relative; } body .particletext.lines > .particle { position: absolute; background-color: rgba(244, 67, 54, 0.5); -webkit-animation: lines 3s linear infinite; animation: lines 3s linear infinite; } @-webkit-keyframes lines { 0%, 50%, 100% { -webkit-transform: translateY(0%); transform: translateY(0%); } 25% { -webkit-transform: translateY(100%); transform: translateY(100%); } 75% { -webkit-transform: translateY(-100%); transform: translateY(-100%); } } @keyframes lines { 0%, 50%, 100% { -webkit-transform: translateY(0%); transform: translateY(0%); } 25% { -webkit-transform: translateY(100%); transform: translateY(100%); } 75% { -webkit-transform: translateY(-100%); transform: translateY(-100%); } }
JS скрипт
function initparticles() { lines(); } function lines() { $.each($(".particletext.lines"), function(){ var linecount = ($(this).width()/50)*10; for(var i = 0; i <= linecount; i++) { $(this).append(''); } }); } jQuery.rnd = function(m,n) { m = parseInt(m); n = parseInt(n); return Math.floor( Math.random() * (n - m + 1) ) + m; } initparticles();