Интересная анимация для текста, которая имитирует хаотичное движение пузырьков. Например, подойдет для оформления заголовков на сайте.
Чтобы подключить анимацию необходимо скопировать HTML разметку, CSS стилизацию и JS скрипт, который генерирует движение пузырьков по математической формуле. Чтобы анимация работала должна быть подключена библиотека jquery перед закрывающим тегом body и перед подключением других скриптов. Если вы затрудняетесь это сделать, то можете скачать готовый пример.
Скачать готовый пример
Пузырики
body .textcontainer { padding: 40px 0; text-align: center; } body .particletext { text-align: center; font-size: 48px; position: relative; } body .particletext.bubbles > .particle { opacity: 0; position: absolute; background-color: rgba(33, 150, 243, 0.5); -webkit-animation: bubbles 3s ease-in infinite; animation: bubbles 3s ease-in infinite; border-radius: 100%; } @-webkit-keyframes bubbles { 0% { opacity: 0; } 20% { opacity: 1; -webkit-transform: translate(0, -20%); transform: translate(0, -20%); } 100% { opacity: 0; -webkit-transform: translate(0, -1000%); transform: translate(0, -1000%); } } @keyframes bubbles { 0% { opacity: 0; } 20% { opacity: 1; -webkit-transform: translate(0, -20%); transform: translate(0, -20%); } 100% { opacity: 0; -webkit-transform: translate(0, -1000%); transform: translate(0, -1000%); } }
function initparticles() { bubbles(); } function bubbles() { $.each($(".particletext.bubbles"), function(){ var bubblecount = ($(this).width()/50)*10; for(var i = 0; i <= bubblecount; i++) { var size = ($.rnd(40,80)/10); $(this).append(''); } }); } jQuery.rnd = function(m,n) { m = parseInt(m); n = parseInt(n); return Math.floor( Math.random() * (n - m + 1) ) + m; } initparticles();
Комментарии ()