[Фича 9] Фиксирование элемента при сролле страницы

Всем доброго утра. Пока я готовлю макет для разработки нашего сайта с вебинаром, предлагаю вам изучить прикольный эффект фиксации одного элемента на странице.

Пример анимации запилил в гифке. Мы будем использовать данный эффект в разработке страницы вебинара, поэтому советую всем, кто занимается параллельно с нами изучить данную фичу - полезненько будет. Всем успехов!)

Готовим поле для работы - создаём Zero Block

Сразу нам нужно будет решить, какой элемент у нас будет фиксироваться (в моём случае это человечек - сайтодел), а какой будет скроллится со всей страницей (текст справа). Предлагаю вам для начала повторить действия со мной, а потом повторить урок со своими элементами.

Длинна моего контейнера: 1148px.

Текст я взял прямо из описания канала в телеге, добавил несколько заголовков, да и всё. Можете вписать любой текст, либо просто сгенерировать его на сайте лорема: https://loremipsum.io/ru/

Окей, текст установлен, добавляем объект, который будет зафиксирован на странице.

Это может быть любое изображение или просто фигура.

Открываем настройки объекта, который будет зафиксирован

Открываем настройки, ищем basic animation и выбираем следующие настройки:

FIXING: on window top (объект будет зафиксирован сверху страницы)

TRIGGER OFFSET: установим значение 50.

Наглядно показываю, что это такое. Это расстояние от начала окна (а анимацию мы начинаем именно сверху страницы), на котором будет удерживаться объект. Поставите 0 - объект прилипнет к верху окна браузера. Поставите 30 - удалится на 30 пикселей.

DISTANCE: 390px - расстояние скролла при котором будет фиксироваться объект. То есть элемент фиксируется только на 390 пикселей прокрутки страницы. При моём объёме текста этого хватит.

Готово. Сохраняем, закрываем, смотрим. Всё как всегда. Элемент успешно зафиксировался.

На этом всё, чуть позже мы используем более сложную фиксацию с переходами и комбинированием других элементов, но всё потом. Всем хорошего дня!)