⚡
✌️
Как сделать эффект фиксации
Цель — применить фиксацию к двум объектам так, чтобы первый сразу залипал посередине страницы, а второй в тот момент, когда встретиться с первым. Вот так:
1
Какие есть настройки
FIXING
Настройка области фиксации объекта. Это та область экрана, (верх, центр, низ) относительно которой стартует эффект фиксирования. Обратите внимание, формы на примере залипают в центре экрана.
TRIGGER OFFSET
Это точка начала фиксации объекта относительно выбранного Window Top / Window Center / Window Bottom.
DISTANCE
Это расстояние в пикселях, которое должен пройти объект в режиме фиксации.
Какие применить настройки
1
Установим параметры объектов
1. Добавьте на страницу Zero Blok из библиотеки блоков и перейдите в редактирование блока. Поместите 2 объекта в рабочую облаcть, по вертикали, друг за другом.
2. Объектам задайте одинаковую область фиксации. Мы установили WINDOW CENTER. Оба объекта фиксируются посередине экрана.
3. Лучше сразу выбрать конечный размер всех элементов и расстояние между ними. Размер каждого из них повлияет на параметры анимации.
Размеры фигур 100x100 px. Расстояние между фигурами 300px. Расстояние = Отступ второго объекта - Высота первого
Совет: Если у вас нет четкой задачи по размерам, используйте целые или десятичные значения в размерах элементов и расстояниях между ними для упрощения расчетов.
2
Настройка параметров анимации
1. Начнем с настройки Trigger offset / Точки начала анимации.
Точка отсчитывается относительно выбранной нами области, Window center.
Начните с верхнего объекта — так удобнее рассчитать точки начала анимации для остальных. У него точка начала анимации равна 0px. Это значит, что первый объект залипнет точно по центру экрана.
Нижний объект должен залипнуть когда коснется верхнего. Это значит, что его точка начала анимации будет ниже на высоту первого объекта. Ставим отступ 100px.
Точка отсчитывается относительно выбранной нами области, Window center.
Начните с верхнего объекта — так удобнее рассчитать точки начала анимации для остальных. У него точка начала анимации равна 0px. Это значит, что первый объект залипнет точно по центру экрана.
Нижний объект должен залипнуть когда коснется верхнего. Это значит, что его точка начала анимации будет ниже на высоту первого объекта. Ставим отступ 100px.
2. Настроим Distance / Дистанцию.
Это то расстояние, которое должен пройти объект в режиме фиксирования. Начните настройку анимации с нижнего объекта. Так вам будет удобнее рассчитать расстояние залипания.
Это то расстояние, которое должен пройти объект в режиме фиксирования. Начните настройку анимации с нижнего объекта. Так вам будет удобнее рассчитать расстояние залипания.
Квадрат. Если еще раз взглянуть на пример, можно заметить, что в режиме фиксации квадрат не проходит никакого расстояния, а только фиксируется под кругом. Значит нам нужно поставить расстояние дистанции 0px.
Круг. Круг в режиме фиксации на экране проходит расстояние до квадрата. После этого эффект фиксации пропадает и обе фигуры скроллятся как обычно.
По сути, круг должен добраться до положения квадрата, но остановиться выше, чтобы зафиксироваться рядом.
Значит это 400px - 100px (высота квадрата) = 300px
По сути, круг должен добраться до положения квадрата, но остановиться выше, чтобы зафиксироваться рядом.
Значит это 400px - 100px (высота квадрата) = 300px
Сохраните настройки и опубликуйте страничку. Изменения будут видны после публикации страницы или в режиме предпросмотра.
Помогла ли инструкция понять принцип работы эффекта фиксации?
