Гравитация объектов в 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>
Скопировать код
Скопировать код
Код скопирован!

Особенности

  • Элементы имеют массу
    Большие элементы падают быстрее и могут толкать маленькие
  • Запускается по триггеру
    Если контейнер с элементами находится в видимой зоне экрана
  • Работает с автоскейлом
    Мод работает корректно как с масштабированием, так и без него

Документация

Элементы

Параметры

Если при установке что-то пошло не так

Добавьте параметр ?showerrors в конец ссылки, чтобы увидеть ошибки и рекомендации по их исправлению