[Урок 49] Красивый параллакс эффект в Tilda
Привет-привет! Все скачали материал номер 8? Тогда сегодня приступим к реализации параллакса с горами на Tilda.
Сегодня начнём погружаться в мир сложных эффектов. Первым эффектом станет скроллинг-параллакс. Поехали!
Что такое скроллинг-параллакс?
Параллакс скроллинг — это эффектная техника в веб-дизайне. Ее суть заключается в том, что элементы на заднем плане двигаются медленнее, чем те, что впереди. Чаще всего достигнуть этого можно с помощью техники, когда изображение разбивается на несколько слоев, которые прокручиваются с разной скоростью.
Материалы для урока были взяты от сюда: http://www.firewatchgame.com
Повторяем анимацию
Цель: сделать движение задних элементов фона медленнее, чем передних.
Распаковываем архив с материалом, там фон уже распилен на слои.
Переходим на Tilda и открываем Zero Block
Само собой анимацию мы будем делать именно в нулевом блоке.
Для начала делаем высоту блока в 1000 пикселей и ставим цвет фона: #210002
Далее добавляем изображение (нажимаем на крестик в верхнем левом углу и нажимаем Add Image).
Предисловие: подобные элементы лучше всего делать в векторе (svg)
Загружаем первый слой
Загружаем первый слой всего изображения (layer0.png)
Нажимаем на кнопку Original size и выравниваем изображение по центру. Так же прикрепляем его к верху контейнера (см. скриншот).
Анимируем слой
Теперь займёмся непосредственно самим параллаксом.
Открываем настройки блока с изображением и ищем раздел "Basic Animation".
Выбираем Scroll и устанавливаем скорость прокручивания 60%.
Добавляем второй слой
Копируем первый блок с изображением и загружаем поверх него второй слой (layer1.png).
Если вы копировали первый слой, а не добавляли новое изображение - настройки анимации сохранятся.
Внимание! У второго слоя увеличиваем скорость прокручивания до 80%!
Выравниваем второй слой с первым.
Повторяем подобные действия со всеми слоями
Теперь нам нужно сделать то же самое, только с остальными слоями. Не забываем выравнивать слои, накладывая их друг на друга.
В настройках анимации у каждого слоя нам нужно увеличивать скорость прокрутки ровно на 20%. То есть:
- 3 слой: 100%
- 4 слой: 120%
- 5 слой: 140%
- 6 слой: 160%
- 7 слой: 180%
- 8 слой: 200%
И так далее.
Таким образом мы получаем 8 слоёв, каждый из которых наложен друг на друга. Скорость прокрутки каждого последующего слоя увеличивается на 20%
Последний штрих
Теперь необходимо поместить ещё один блок под все изображения.
Добавляем фигуру (Крестик в верхнем углу, нажимаем Add shape). В настройках фигуры ставим цвет: #210002 (точно такой же, как у всего фона).
Накладываем блок поверх последнего слоя верхнего изображения.
У фигуры ставим скорость скролла 200%. Сохраняем, закрываем и публикуем.
Всем успехов! Твой, сайтодел.