Эффект наложения блока при скролле
Модификация добавляет эффект наложения одного блока на другой при скролле страницы. Применить можно к любым стандартным блокам и 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. Пошаговая инструкция
В этой статье мы пошагово объясним, как сделать эффект наложения блоков при скролле в Tilda. Tilda – это интуитивно понятный сервис для создания веб-сайтов без необходимости программирования. Он предоставляет различные инструменты и функции, включая возможность создания эффектов при скролле страницы, таких как наложение блоков. В данной статье мы расскажем, как реализовать этот эффект с помощью Tilda и создать уникальную интерактивность на вашем веб-сайте.
Статья будет разделена на две части. В первой части мы с вами получим эффект наложения блоков при скролле, используя только нулевые блоки или zero block tilda. Во второй же части применим этот эффект на стандартные блоки.
Как создать эффект наложения блоков при скролле в Tilda, используя zero block
Итак, для того, чтобы этот метод заработал в полную силу, на вашей странице в самом начале должен быть хотя бы один обычный статический блок. Если это условие выполняется, то следуйте инструкции ниже:
- Создайте zero block
- Нажмите на кнопку «Редактировать блок»
- Нажмите на кнопку «Settings»
- В поле «Window container height, %» пропишите значение «100»
- Наполните этот блок по своему усмотрению и закройте его
- Продублируйте этот zero block столько раз, сколько блоков с эффектом наложения вам необходимо
- Измените контент в продублированных блоках, соответственно
- После всех блоков на странице нажмите на кнопку «+», выберите пункт «Другое» и добавьте html блок «Т123»
- Нажмите на кнопку «Контент» и скопируйте в него следующий код:
Код доступен только тем, кто зарегистрировался и оплатил подписку
Подписка стоит 400 руб./мес. или 1500 руб. в год
Покупая подписку, ты получаешь:
– доступ ко всем уникальным модификациям
– отключение всей рекламы на сайте
– неограниченный размер загружаемых файлов в LF Cloud
- Сохраните изменения и закройте блок.
- Нажмите на кнопку «Настройки» у первого zero block и скопируйте его ID
- Вставьте скопированный ID в код выше
- Аналогичным образом скопируйте ID всех остальных блоков и вставьте в код (Пример: var >Для того, чтобы после блоков с эффектом наложения использовать обычные статичные блоки без эффектов, сделайте следующее:
- Добавьте любые желаемые блоки
- Нажмите на кнопку «Настройки» у добавленного блока
- Задайте для всего блока любой фоновый цвет
- Сохраните изменения и опубликуйте страницу
После публикации страницы вы увидите, что нулевые блоки (zero block), к которым мы применили эффект наложения, плавно накладываются друг на друга. А те блоки, которые идут после нулевых блоков, прокручиваются как обычно, в штатном режиме.
Как создать эффект наложения блоков при скролле в Tilda, используя стандартные блоки
Общий принцип использования эффекта наложения у стандартных блоков практически такой же, как и у zero block, за исключением одной небольшой детали:
- Создайте любые стандартные блоки, к которым вы будете применять эффект наложения блоков при скролле в Tilda
- Для всех блоков задайте фоновые цвета в настройках каждого
- После всех блоков на странице нажмите на кнопку «+», выберите пункт «Другое» и добавьте html блок «Т123»
- Нажмите на кнопку «Контент» и скопируйте в него следующий код:
style> #rec624466290, #rec624466415, #rec624466453 height: 100vh; > style>
- Вместо ID в коде, скопируйте и вставьте id всех блоков с эффектом наложения через запятую
- После этого, в этот же html блок скопируйте и вставьте следующий код:
Код доступен только тем, кто зарегистрировался и оплатил подписку
Подписка стоит 400 руб./мес. или 1500 руб. в год
Покупая подписку, ты получаешь:
– доступ ко всем уникальным модификациям
– отключение всей рекламы на сайте
– неограниченный размер загружаемых файлов в LF Cloud
- Замените ID в коде на ID ваших блоков с эффектом наложения
- Сохраните изменения и опубликуйте страницу
Заключение
Эффект наложения блоков при скролле – это мощный инструмент для добавления интерактивности и привлекательности к вашему веб-сайту. Следуя нашей пошаговой инструкции, вы сможете легко создать этот эффект с помощью Tilda и удивить своих посетителей уникальным дизайном и визуальным опытом. Экспериментируйте, кастомизируйте и делайте свой сайт неповторимым! Не забывайте сохранять изменения и наслаждаться результатом вашего творчества.
Смотрите обучающие видео уроки по Тильде тут
Анимация появления текста
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) и разместить верхние элементы под нижними.