Анимация Падающего Конфетти.

Анимация Падающего Конфетти

Новый год уже не за горами! Самое время украсить свой веб-сайт. Сегодня у нас есть новый материал для вас! Мы покажем вам, как добавить красивую анимацию конфетти на ваш сайт с помощью Joomla Page Builder Gridbox с использованием CSS и Javascript. Также мы включили тему Freebox из демоверсии!


Технически, анимация конфетти очень похожа на эффект падающего снега. Хотим заметить, что анимированный конфетти можно добавить на любой сайт Joomla, код ниже будет работать где угодно без проблем.

Пользовательские CSS

Откройте Gridbox CSS Editor

Скопируйте код CSS ниже и вставьте в редактор Gridbox CSS

#confetti {

    left0;

    positionfixed;

    right0;  

    top-160px;

    z-index10000;

}


#confetti .ball {

    animation-iteration-count :infinite !important;

    -webkit-animation-iteration-count :infinite !important;

    border-radius: 50%;

    cursordefault;

    display: inline-block;

    height10px;

    user-select: none

    -webkit-user-select: none

    width10px;

}  


@-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 в отдельной строке.

Анимация конфетти

Заказать установку

Начальный Оптимальный Продвинутый

3990 ₽

5990 ₽

7990 ₽

Рейтинг 5 (2 Голоса)
Сжатие изображений без потерь
Previous

Сжатие изображений без потерь

Оставить отзыв
Инструмент сжатия изображений без потери качества,...
Читать далее
Анализ скорости загрузки сайта
Далее

Анализ скорости загрузки сайта

Оставить отзыв
Анализ скорости загрузки сайта.Проверьте ваш сайт ...
Читать далее

Теги страницы

Это интересно

ТЕГИ

Популярные

Приложение Zero

Представляем приложение Zero

Оставить отзыв
Дамы и господа, представляем вам приложение Gridbox Zero с пользовательским...
Читать далее

Последние материалы

Анализ скорости загрузки сайта

Анализ скорости загрузки сайта

Оставить отзыв
Анализ скорости загрузки сайта.Проверьте ваш сайт в Google PageSpeed ​​Insi...
Читать далее
Тема для ресторана Joomla Theme Maestro

Ресторан Joomla Theme Maestro

Оставить отзыв
Представляем вам новую, стильную и гармоничную тему для ресторана Joomla Th...
Читать далее
Cоздание сайта на joomla. The Harbor Gridbox Theme

Cоздание сайта на joomla. The Harbor Gridbox Theme

Оставить отзыв
Cоздание сайта на Joomla с красивой и современной темой Harbour! Креативная...
Читать далее

Категории

Follow us