Интересная анимация для текста, которая имитирует хаотичное движение конфетти. Например, подойдет для оформления заголовков на сайте по организации праздников.
Чтобы подключить анимацию необходимо скопировать 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.confetti > .particle { opacity: 0; position: absolute; -webkit-animation: confetti 3s ease-in infinite; animation: confetti 3s ease-in infinite; } body .particletext.confetti > .particle.c1 { background-color: rgba(76, 175, 80, 0.5); } body .particletext.confetti > .particle.c2 { background-color: rgba(156, 39, 176, 0.5); } @-webkit-keyframes confetti { 0% { opacity: 0; -webkit-transform: translateY(0%) rotate(0deg); transform: translateY(0%) rotate(0deg); } 10% { opacity: 1; } 35% { -webkit-transform: translateY(-800%) rotate(270deg); transform: translateY(-800%) rotate(270deg); } 80% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translateY(2000%) rotate(1440deg); transform: translateY(2000%) rotate(1440deg); } } @keyframes confetti { 0% { opacity: 0; -webkit-transform: translateY(0%) rotate(0deg); transform: translateY(0%) rotate(0deg); } 10% { opacity: 1; } 35% { -webkit-transform: translateY(-800%) rotate(270deg); transform: translateY(-800%) rotate(270deg); } 80% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translateY(2000%) rotate(1440deg); transform: translateY(2000%) rotate(1440deg); } }
function initparticles() { confetti(); } function confetti() { $.each($(".particletext.confetti"), function(){ var confetticount = ($(this).width()/50)*10; for(var i = 0; i <= confetticount; i++) { $(this).append(''); } }); } jQuery.rnd = function(m,n) { m = parseInt(m); n = parseInt(n); return Math.floor( Math.random() * (n - m + 1) ) + m; } initparticles();
Комментарии ()