Время настройки: 2 минуты

Гравитация объектов в Zero блоке

Добавляет физику элементам в Zero-блоке и позволяет создать эффект их падения с реалистичными столкновениями и взаимодействием

Инструкция по установке

Cкопируйте код ниже и вставьте его внутрь <head> в настройках сайта

Этот скрипт устанавливается только один раз и помогает модификациям работать. Если он уже стоит у вас на сайте, добавлять его снова не нужно, просто пропустите этот шаг.

<script src="https://cdn.postnikovmd.com/tilda@1.5/mods.min.js"></script>

Создайте блок, в котором будет работать эффект, и присвойте ему класс .uc-gravity

Если вы планируете использовать несколько блоков с гравитацией на одной странице, задайте им разные названия классов, например, .uc-gravity1, .uc-gravity2 и т. д.
Как задать класс блокам/элементам?
Задайте элементам, для которых должна работать гравитация, класс .matter-elem

Это могут быть как отдельные элементы (картинки, шейпы, текст), так и группы с типом Object. Каждый объект начнёт падение из точки, в которой он изначально располагается. Его форма и размер могут быть любыми.
Создайте шейп, внутри которого будут находиться падающие элементы, и присвойте ему класс .matter

Данный шейп будет выступать границей для элементов с гравитацией.
Если элементы должны падать из-за границ контейнера, но после падения оставаться внутри него, разместите их выше созданного шейпа. См. пример.
Задайте в настройках модификации параметры и поведение элементов
Скопируйте код и вставьте его в блок T123 в конец страницы

Как это сделано?

<!--gravity.js Гравитация объектов в Zero-блоке. https://postnikovmd.com/mods/gravity-->
<script>gravity.init('.uc-gravity', { random: true, rotate: true })</script>

Открыть пример

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

Класс блока с гравитацией:

Сила гравитации

Чем больше значение параметра, тем быстрее будут падать элементы. Может принимать значения от 0 до ∞. По‑умолчанию — 1 (100%)

+ Настройки элементов

Случайное положение

Не учитывать массу элементов

Случайный поворот

Настройки элементов

Сила толчка

Если включено, все элементы будут падать с одинаковой скоростью вне зависимости от их размеров.

Запускать элементы по клику

Если включено, при нажатии на элементы, им будет придаваться толчок в определенном направлении.

Чем больше значение параметра, тем сильнее элементы будут подлетать при нажатии. Может принимать значения от 0 до ∞. По‑умолчанию — 1 (100%)

Если включено, элементы будут располагаться в случайном месте по оси X (горизонтали), но в пределах координат двух крайних элементов.

<!--gravity.js Гравитация объектов в Zero-блоке. https://postnikovmd.com/mods/gravity-->
<script>gravity.init(".uc-gravity")</script>

Скопировать код

Особенности

Элементы имеют массу

Большие элементы падают быстрее и могут толкать маленькие
Запускается по триггеру

Если контейнер с элементами находится в видимой зоне экрана
Работает с автоскейлом

Мод работает корректно как с масштабированием, так и без него