Фиксация Zero block при скролле
Модификация добавляет функционал конкретному Zero block, который нужно зафиксировать при скролле сверху или снизу. В Тильде часто используют эту модификацию для фиксации меню или кнопок на Zero block. Но можешь отрисовать другие элементы сайта в Zero block и зафиксировать их при скролле.
Как зафиксировать Zero block сверху
- Укажи в настройках id блока, который нужно зафиксировать.
- Скопируй этот код и вставь на свой сайт. Памятка по вставке кода.
Как закрепить блок в тильде при скролле
ФИКСАЦИЯ ТЕКСТА ПРИ СКРОЛЛЕ
Можно экспериментировать с крупной типографикой, создавать интерактивные сообщения
Как сделать эффект фиксации
Цель — применить фиксацию к двум объектам так, чтобы первый сразу залипал посередине страницы, а второй в тот момент, когда встретиться с первым. Вот так:
Какие есть настройки
Настройка области фиксации объекта. Это та область экрана, (верх, центр, низ) относительно которой стартует эффект фиксирования. Обратите внимание, формы на примере залипают в центре экрана.
TRIGGER OFFSET
Это точка начала фиксации объекта относительно выбранного Window Top / Window Center / Window Bottom.
Это расстояние в пикселях, которое должен пройти объект в режиме фиксации.
Какие применить настройки
Установим параметры объектов
1. Добавьте на страницу Zero Block из библиотеки блоков и перейдите в редактирование блока. Поместите 2 объекта в рабочую облаcть, по вертикали, друг за другом.
2. Объектам задайте одинаковую область фиксации. Мы установили WINDOW CENTER. Оба объекта фиксируются посередине экрана.
3. Лучше сразу выбрать конечный размер всех элементов и расстояние между ними. Размер каждого из них повлияет на параметры анимации.
Размеры фигур 100×100 px. Расстояние между фигурами 300px. Расстояние = Отступ второго объекта — Высота первого
Совет: Если у вас нет четкой задачи по размерам, используйте целые или десятичные значения в размерах элементов и расстояниях между ними для упрощения расчетов.
Настройка параметров анимации
1. Начнем с настройки Trigger offset / Точки начала анимации.
Точка отсчитывается относительно выбранной нами области, Window center.
Начните с верхнего объекта. Так удобнее рассчитать точки начала анимации для остальных. У него точка начала анимации точка равна 0px. Это значит, что первый объект залипнет точно по центру экрана.
Нижний объект должен залипнуть когда коснется верхнего. Это значит, что его точка начала анимации будет ниже на высоту первого объекта. Ставим отступ100px.
2. Настроим Distance / Дистанцию.
Это то расстояние, которое должен пройти объект в режиие фиксирования. Начните настройку анимации с нижнего объекта. Так вам будет удобнее рассчитать расстояние залипания.
Квадрат. Если еще раз взглянуть на пример, можно заметить, что в режиме фиксации квадрат не проходит никакого расстояния, а только фиксируется под кругом. Значит нам нужно поставить расстояние дистанции 0px.
Круг. Круг в режиме фиксации на экране проходит расстояние до квадрата. После этого эффект фиксации пропадает и обе фигуры скроллятся как обычно.
По сути, круг должен добраться до положения квадрата, но остановиться выше, чтобы зафиксироваться рядом.
Значит это 400px — 100px (высота квадрата) = 300px
Сохраните настройки и опубликуйте страничку. Изменения будут видны после публикации страницы или в режиме предпросмотра.
Как закрепить блок в тильде при скролле
С помощью этого приема можно сделать залипающие иллюстрации для длинных историй, создать элементы навигации по странице
Tilda Swinton
THE STORY OF THE GREAT ACTRESS
Katherine Matilda Swinton is a British actress, model, and artist. She is known for her roles in both arthouse films and large-scale Hollywood productions.
She won the Academy Award for Best Supporting Actress and the BAFTA Award for Best Actress in a Supporting Role for her performance as Karen Crowder in the 2007 film Michael Clayton.
Katherine Matilda Swinton was born on 5 November 1960 in London, the daughter of Judith Balfour (née Killen; 1929–2012) and Sir John Swinton. She has three brothers. Her father is a retired major general in the British Army, and was Lord Lieutenant of Berwickshire from 1989 to 2000. Her mother was Australian.
Swinton began her career in experimental films directed by Derek Jarman, starting with Caravaggio (1986), followed by The Last of England (1988), War Requiem (1989), and The Garden (1990). Swinton won the Volpi Cup for Best Actress at the Venice Film Festival for her portrayal of Isabella of France in Edward II (1991). She next starred in Sally Potter’s Orlando (1992), and was nominated for the European Film Award for Best Actress.
Просим обратить внимание: техническая поддержка Tilda Publishing не осуществляет поддержку связанную с работой кода
С помощью модификации вы сможете зафиксировать блок сверху или снизу экрана при скролле и заставить отлипнуть в нужном месте. Работает как с блоками из библиотеки, так и с Zero Block.
Модификация: прилипание блока
За модификацию спасибо Дмитрию и Эдуарду
Блок фиксируется в верхней части экрана после того, как пользователь доскроллит до нужного места
Фиксация сверху без отлипания
1) Добавьте в нужном месте блок, который будет прилипать к верхней части экрана.
2) Добавьте код #1 в блок Т123 из категории «Другое».
3) Замените в коде id прилипающего блока. Id можно найти в самом низу настроек блока. Формат — #rec135372713.
/* Sticky блок - замените на Id блока который должен прилипнуть */ #rec135372713 < position: sticky; position: -webkit-sticky; z-index: 999; top: 0px; >.t-records Блок фиксируется вверху экрана, когда до него доскроллит пользователь, и отлипает в нужном месте.
Фиксация сверху с отлипанием
1) Добавьте блок, который будет прилипать к верху экрана.
2) Добавьте код #2 в блок Т123 из категории «Другое»
3) Укажите в коде Id прилипающего блока и блока, после которого прилипание отключится. Id можно найти в самом низу настроек блока. Формат — #rec135372713.
/* Sticky блок - замените на Id блока который должен прилипнуть */ #rec135372713 < position: sticky; position: -webkit-sticky; z-index: 999; top: 0px; >.t-records Блок будет зафиксирован в нижней части экрана с начала страницы и отлипнет в нужном месте.
Фиксация снизу с отлипанием
1) Добавьте блок, который будет фиксироваться внизу экрана. Расположите блок в месте, где должно произойти отлипание. Если блок должен быть зафиксирован до конца страницы, расположите его в самом низу.
2) Добавьте код #3 в блок Т123 из категории «Другое».
3) Укажите в коде Id блока, прилипающего к низу. Id можно найти в самом низу настроек блока. Формат — #rec135372713.
/* Sticky блок - замените на Id блока который должен прилипнуть */ #rec135372713 < position: sticky; position: -webkit-sticky; z-index: 999; bottom: 0px; >.t-records