Free
Setup
Info
Info
Включено в подписку
Скопировано!
Поделиться
Настройки
[
Написать в поддержку
Telegram: @sonneto_support
Кастомизация
]
Модификации
Эффекты
/
URL скопирован в буфер обмена!
Rounded shape


The modification allows you to round the corners of shapes


Setup
Info
Info

  • Открываем Zero Block и заходим в режим редактирования.

  • Вставляем шейпы на страницу по бовам вашего контента который хотите скруглить (маленькие фигурки) и назначаем им класс: sonneto-gshape

  • Добавляем один большой прозрачный шейп сверху и назначаем ему класс: sonneto-gwrap Этот шейп будет отвечать за эффект “растекания”

  • Далее открываем генератор и заполняем поля. Можете эксперементировать с параметрарми стекания.

  • Копируем результат и вставляем его в блок T123 (или любой другой блок с HTML/CSS).

  • Дополнительно добавляем блок Т123 и вставляем в него скрипт после кода из генератора.

Скопировано!
Скопировать скрипт

Настройки модификации

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

Генератор кода

<script>
$('.sonneto-gshape').appendTo('.sonneto-gwrap .tn-atom');
$('.sonneto-gshape .tn-atom').removeClass('tn-atom');
</script>

Эффект стекания шейпов

Теги

Модификация

#

CSS

#

Эффекты

#
81509876
id:
Базовые настройки
  • Фоновый цвет фигур → #fbfbfb (можно менять под цвет сайта или брендовые оттенки)

  • Эффект «липкости» → stdDeviation в feGaussianBlur (например: 5 — лёгкая плавность, 12 — сильный эффект «тянущихся» фигур)

  • Интенсивность слияния → values в feColorMatrix (например: 30 -15 усиливает эффект слипания, можно уменьшить для более мягкого вида)
Подключение скриптов
Технические советы
  • Safari и старые браузеры могут игнорировать filter: url(#goo) → использовать -webkit-filter

  • При большом количестве фигур производительность может падать → уменьшать stdDeviation или количество элементов .blob

  • Проверять overflow и размеры контейнера .sonneto-gshape, чтобы эффект не обрезался

  • Если эффект «дрожит» при скролле → убедиться, что контейнер .sonneto-gwrap не использует transform или zoom, которые ломают рендер фильтра

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

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

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