Что такое эффект при скролле в тильде
Перейти к содержимому

Что такое эффект при скролле в тильде

  • автор:

Эффект наложения блока при скролле

Модификация добавляет эффект наложения одного блока на другой при скролле страницы. Применить можно к любым стандартным блокам и zero block, которые укажешь в коде. Демо решения.

Как сделать эффект наложения блока при скролле

Для реализации эффекта высота блока должна быть больше высоты экрана.

  1. Укажи в настройках id всех блоков через запятую, которым нужно добавить эффект.
  2. Скопируй этот код и вставь на свой сайт. Памятка по вставке кода.

Просим обратить внимание: техническая поддержка 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 

Эффекты появления при скролле в Тильде

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

Такую анимацию появления можно сделать как в стандартных блоках, так и для Zero Block. Рассмотрим все способы отдельно.

Эффект появления элементов при скролле для стандартных блоков

В настройках почти каждого блока в Тильде есть раздел «Анимация»:

В нем можно настроить анимацию появления каждого элемента этого блока: Заголовок, Описание, Кнопка, Текст, Изображение.

Тильда предлагает нам такие варианты появления элементов при скролле:

  • прозрачность;
  • прозрачность (снизу);
  • прозрачность (сверху);
  • прозрачность (слева);
  • прозрачность (справа);
  • прозрачность (увеличение);

Эффект появления элементов при скролле для Zero Block

В Zero Block вы можете воспользоваться стандартной анимацией появления для каждого элемента или создать уникальный собственный.

Анимация появления текста

1. Расставляем текстовые блоки и добавляем над каждым текстом элемент Shape. Уменьшаем непрозрачность Shape до 90%.

2. В пошаговой анимации выставляем Event (событие) — on Scroll (при скролле), Start Trigger (начало триггера анимации) — on Window Top (от верхнего края экрана), Trigger Offset (отступ, задержка) — 200 пикселей. В первом шаге при дистанции 10 пикселей выставляем смещение вниз на 90 пикселей, чтобы полупрозрачный шейп перестал перекрывать текстовый блок.

3. Для следующих элементов выставляйте такие же настройки. Если вы хотите, чтобы следующий текстовый блок показывался быстрее, увеличьте значение Trigger Offset.

4. Чтобы при смещении вниз шейпы не перекрывали нижние элементы, откройте слои (ctrl (command) + L) и разместить верхние элементы под нижними.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *