Free
Setup
Info
Info
Включено в подписку
Активируйте подписку Pro
Написать в поддержку
Настройки
[
Кастомизация
Модификации
Эффекты
/
Telegram: @sonneto_support
]
Setup
Info
Info
Теги

Модификация

#

CSS

#

Эффекты

#

Модификатор для создания пульсирующей анимации с эффектом притяжения.

Эффект черной дыры

не доступно
id:
<div class="hole-bg">
<div class="hole">
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
</div>
</div>

<style>
/* Контейнер под фон */
.hole-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden; /* чтобы круги не вылазили */
z-index: 0; /* фон */
}

/* Центрируем анимацию */
.hole {
display: flex;
align-items: center;
justify-content: center;
position: relative;
width: 100%;
height: 100%;
}

/* Сами круги */
.hole i {
display: block;
position: absolute;
width: 120px; /* размер круга */
height: 120px;
border-radius: 50%;
opacity: 0;
animation-name: scale;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: linear;
background: rgba(255,255,255,0.15); /* цвет/прозрачность */
}

/* Задержки для кругов */
.hole i:nth-child(1) { animation-delay: 0.3s; }
.hole i:nth-child(2) { animation-delay: 0.6s; }
.hole i:nth-child(3) { animation-delay: 0.9s; }
.hole i:nth-child(4) { animation-delay: 1.2s; }
.hole i:nth-child(5) { animation-delay: 1.5s; }
.hole i:nth-child(6) { animation-delay: 1.8s; }
.hole i:nth-child(7) { animation-delay: 2.1s; }
.hole i:nth-child(8) { animation-delay: 2.4s; }
.hole i:nth-child(9) { animation-delay: 2.7s; }
.hole i:nth-child(10) { animation-delay: 3s; }

/* Анимация */
@keyframes scale {
0% {
transform: scale(2);
opacity: 0;
box-shadow: 0px 0px 50px rgba(255, 255, 255, 0.4);
}
50% {
transform: scale(1) translate(0px, -5px);
opacity: 1;
box-shadow: 0px 8px 20px rgba(255, 255, 255, 0.5);
}
100% {
transform: scale(0.1) translate(0px, 5px);
opacity: 0;
box-shadow: 0px 10px 20px rgba(255, 255, 255, 0);
}
}
</style>
  • Открываем Zero Block и заходим в режим редактирования.

  • В редакторе Zero Block размещаем HTML элемент и вставляем в него подготовленный код.

  • Установите желаемую высоту, анимация адаптивна.
Скопировано!
Скопировать код
Настройки модификации

Инструкция, информация и код доступны только в веб-версии сайта.

Текст скопирован в буфер обмена!
Текст скопирован в буфер обмена!
Базовые настройки
  • Цвет круга/фона → задаётся через background в .hole i (например, background: rgba(255,255,255,0.15); — можно заменить на любой цвет или прозрачность для бренда)

  • Размер круга → задаётся через width и height в .hole i(например, width: 120px; height: 120px; — можно увеличить или уменьшить)

  • Положение центра эффекта → определяется контейнером .hole с display: flex; align-items: center; justify-content: center (круги автоматически центрируются по блоку)

  • Количество кругов → определяется количеством тегов <i> внутри .hole (можно добавить или убрать <i> для изменения плотности эффекта)

  • Скорость анимации → задаётся через animation-duration в .hole i (например, animation-duration: 3s; — меньшее значение ускоряет эффект, большее замедляет)

  • Авто-адаптация размера → блок .hole-bg растягивается на всю ширину и высоту родительского Zero Block (width:100%; height:100%)
Технические советы
  • Эффект реагирует на время и задержки, заданные через animation-delay у каждого <i>; для плавности лучше оставлять последовательные задержки.

  • Цвета и прозрачность берутся из стиля .hole i, поэтому смена цвета в CSS автоматически обновит эффект.

  • При большом количестве кругов может быть нагрузка на браузер → оптимально использовать 5–15 кругов одновременно.

  • Элемент <div class="hole"> — контейнер для кругов, его нельзя удалять, иначе эффект не будет работать.

  • Для корректного отображения важно, чтобы родительский Zero Block имел явные размеры или вычисляемые через CSS/Editor.
Подключение скриптов

Для корректной работы модификации необходимо, чтобы на странице была подключена библиотека jQuery, так как скрипт использует $(document).ready() и .each().

Инструкция, информация и код доступны только в веб-версии сайта.

Сделать это можно в разделе: Настройки сайта - Ещё - Подключить jQuery на страницах сайта.
В Zero Block скрипты рекомендуется вставлять только после полной загрузки контента страницы, чтобы все элементы блока были доступны для обработки.