Анимация с сердечками для текста
Интересная анимация для текста, которая имитирует хаотичное движение сердечек. Например, подойдет для оформления заголовков на сайте знакомств.
Чтобы подключить анимацию необходимо скопировать 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.hearts > .particle {
opacity: 0;
position: absolute;
background-color: #cc2a5d;
-webkit-animation: hearts 3s ease-in infinite;
animation: hearts 3s ease-in infinite;
}
body .particletext.hearts > .particle:before, body .particletext.hearts > .particle:after {
position: absolute;
content: '';
border-radius: 100px;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background-color: #cc2a5d;
}
body .particletext.hearts > .particle:before {
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
body .particletext.hearts > .particle:after {
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
@-webkit-keyframes hearts {
0% {
opacity: 0;
-webkit-transform: translate(0, 0%) rotate(45deg);
transform: translate(0, 0%) rotate(45deg);
}
20% {
opacity: 0.8;
-webkit-transform: translate(0, -20%) rotate(45deg);
transform: translate(0, -20%) rotate(45deg);
}
100% {
opacity: 0;
-webkit-transform: translate(0, -1000%) rotate(45deg);
transform: translate(0, -1000%) rotate(45deg);
}
}
@keyframes hearts {
0% {
opacity: 0;
-webkit-transform: translate(0, 0%) rotate(45deg);
transform: translate(0, 0%) rotate(45deg);
}
20% {
opacity: 0.8;
-webkit-transform: translate(0, -20%) rotate(45deg);
transform: translate(0, -20%) rotate(45deg);
}
100% {
opacity: 0;
-webkit-transform: translate(0, -1000%) rotate(45deg);
transform: translate(0, -1000%) rotate(45deg);
}
}
JS скрипт
function initparticles() {
hearts();
}
function hearts() {
$.each($(".particletext.hearts"), function(){
var heartcount = ($(this).width()/50)*5;
for(var i = 0; i <= heartcount; i++) {
var size = ($.rnd(60,120)/10);
$(this).append('');
}
});
}
jQuery.rnd = function(m,n) {
m = parseInt(m);
n = parseInt(n);
return Math.floor( Math.random() * (n - m + 1) ) + m;
}
initparticles();
Комментарии ()