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

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

Новый год уже не за горами! Самое время украсить свой веб-сайт. Сегодня у нас есть новый материал для вас! Мы покажем вам, как добавить красивую анимацию конфетти на ваш сайт с помощью 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 (1 Голоса)
Сжатие изображений без потерь
Previous

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

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

Персональная и туристическая тема блога

Оставить отзыв
Минималистическая тема для личного и туристическог...
Читать далее

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

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

ТЕГИ

Популярные

Sitemap xml генератор

Sitemap xml генератор

Оставить отзыв
Мы продолжаем улучшать SEO в Gombox для Joomla Website Builder. Недавно мы ...
Читать далее

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

Content Slider

Cамый гибкий и мощный плагин слайдера Content Slider

Оставить отзыв
Представляем вам особый плагин с максимальным количеством функций, которые ...
Читать далее
Cоздание сайта на joomla. The Harbor Gridbox Theme

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

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

Сайт для агенства. Тема Gridbox Галстук

Оставить отзыв
Дорогие друзья, мы рады сообщить о нашей теме Gridbox и пакете Joomla Quick...
Читать далее

Категории

Follow us