2 сентября 2019
Новый год уже не за горами! Самое время украсить свой веб-сайт. Сегодня у нас есть новый материал для вас! Мы покажем вам, как добавить красивую анимацию конфетти на ваш сайт с помощью Joomla Page Builder Gridbox с использованием CSS и Javascript. Также мы включили тему Freebox из демоверсии!
Технически, анимация конфетти очень похожа на эффект падающего снега. Хотим заметить, что анимированный конфетти можно добавить на любой сайт Joomla, код ниже будет работать где угодно без проблем.
Пользовательские CSS
Откройте Gridbox CSS Editor
Скопируйте код CSS ниже и вставьте в редактор Gridbox CSS
#confetti {
left: 0;
position: fixed;
right: 0;
top: -160px;
z-index: 10000;
}
#confetti .ball {
animation-iteration-count :infinite !important;
-webkit-animation-iteration-count :infinite !important;
border-radius: 50%;
cursor: default;
display: inline-block;
height: 10px;
user-select: none;
-webkit-user-select: none;
width: 10px;
}
@-webkit-keyframes falling-left {
0% {-webkit-transform: translate3d(0,0,0);opacity: 1;}
10% { opacity: 0;}
20% { opacity: 1;}
30% { opacity: 0;}
40% { opacity: 1;}
50% { opacity: 0;}
60% { opacity: 1;}
70% { opacity: 0;}
80% { opacity: 1;}
90% { opacity: 0;}
100% {-webkit-transform: translate3d(0,120vh,0); opacity: 1;}
}
@keyframes falling-left {
0% {-webkit-transform: translate3d(0,0,0);opacity: 1;}
10% { opacity: 0;}
20% { opacity: 1;}
30% { opacity: 0;}
40% { opacity: 1;}
50% { opacity: 0;}
60% { opacity: 1;}
70% { opacity: 0;}
80% { opacity: 1;}
90% { opacity: 0;}
100% {-webkit-transform: translate3d(0,120vh,0); opacity: 1;}
}
#confetti .ball:nth-child(2n) {
-webkit-animation: falling-left linear;
animation: falling-left linear ;
}
@-webkit-keyframes falling-right {
0% {-webkit-transform: translate3d(0,0,0);opacity: 0;}
10% { opacity: 1;}
20% { opacity: 0;}
30% { opacity: 1;}
40% { opacity: 0;}
50% { opacity: 1;}
60% { opacity: 0;}
70% { opacity: 1;}
80% { opacity: 0;}
90% { opacity: 1;}
100% {-webkit-transform: translate3d(0,120vh,0); opacity: 0;}
}
@keyframes falling-right {
0% {-webkit-transform: translate3d(0,0,0);opacity: 1;}
10% { opacity: 0;}
20% { opacity: 1;}
30% { opacity: 0;}
40% { opacity: 1;}
50% { opacity: 0;}
60% { opacity: 1;}
70% { opacity: 0;}
80% { opacity: 1;}
90% { opacity: 0;}
100% {-webkit-transform: translate3d(0,120vh,0); opacity: 0;}
}
#confetti .ball:nth-of-type(2n+1) {
-webkit-animation: falling-right linear ;
animation: falling-right linear;
}
JavaScript
Откройте Gridbox JavaScript Editor.
Скопируйте приведенный ниже код JS и вставьте его в редактор JavaScript Gridbox.
jQuery(document).on('ready', function() {
var flakes = '',
randomColor;
for(var i = 0, len = 400; i < len; i++) {
randomColor = Math.floor(Math.random()*16777215).toString(16);
flakes += '<div class="ball" style="background: #'+randomColor;
flakes += '; animation-duration: '+(Math.random() * 9 + 2)+'s; animation-delay: ';
flakes += (Math.random() * 2 + 0)+'s;"></div>';
}
document.getElementById('confetti').innerHTML = flakes;
});
HTML
Наконец, нам нужно добавить HTML-код. Для этого мы будем использовать Gridbox Plugin Custom HTML . В плагин мы должны поместить следующий код:
<div id="confetti"></div>
HTML-код вы можете разместить в любом месте. Но мы рекомендуем размещать HTML в отдельной строке.