Анимация с линиями для текста
Интересная анимация для текста, которая имитирует хаотичное движение линий. Например, подойдет для оформления заголовков любом сайте.
Чтобы подключить анимацию необходимо скопировать HTML разметку, CSS стилизацию и JS скрипт, который генерирует движение линий по математической формуле. Чтобы анимация работала должна быть подключена библиотека jquery перед закрывающим тегом body и перед подключением других скриптов. Если вы затрудняетесь это сделать, то можете скачать готовый пример.
Скачать готовый пример
HTML разметка
Линии
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();
Комментарии ()