Создадим «Гибкий блок» с параллаксом «Изменение скорости при прокрутке». Для примера создадим вот такой блок:
Гибкий блок. Задание 5
Interior design
АРХИТЕКТУРНОЕ ПРОЕКТИРОВАНИЕ / ДИЗАЙН ИНТЕРЬЕРОВ / ПРЕДМЕТНЫЙ ДИЗАЙН
1
Для начала нам нужно создать «Гибкий блок».
Открываем панель с блоками и в самом верху выбираем «Гибкий блок»
Открываем панель с блоками и в самом верху выбираем «Гибкий блок»
2
Теперь заходим в редактирование блока и удаляем все, что по умолчанию есть в блоке. Выделите мышью все элементы и нажмите ⌫ Backspace
3
Заливаем фон цветом, добавляем текст и кнопку
Цвет фона на примере #FAF7F0 — добавьте это значение в поле ввода
4
Добавим картинки и нужный текст
Пока просто добавим текст, а дизайном займёмся ниже
5
Итак, мы добавили в блок все основные элементы. Настроим цвет, размер и расположение текста, переместим элементы на свои места, подберём размеры картинок
Меняем цвет текста на #C7A657 (или любой другой). Сделаем все буквы заглавными и текст выровняем посередине
Увеличим площадь рабочей области потянув за край. Также увеличить площадь можно через настройки: открываем настройки и в самом вверху в разделе «Высота контента» устанавливаем значение. Перетащим изображения ниже, чтобы не мешали работать с текстом. Настроим размер текста и расположение
Наслоим изображения. Когда настроим анимацию, то появиться иллюзия объёма
6
Добавим анимацию в блок.
В этом примере мы используем параллакс «Изменение скорости при прокрутке» на изображениях
В этом примере мы используем параллакс «Изменение скорости при прокрутке» на изображениях
В настройках в разделе «Параллакс» — «На компьютерах» выбираем в выпадающем списке «Изменение скорости при прокрутке».
Настраиваем скорость. В нашем случае у боковых изображениях поставим значение=120, а у изображения посередине значение=110. Закройте редактирование блока, чтобы увидеть результат.
P.S.: Если значение установить меньше 100, то элементы при прокрутке будут двигаться вниз
Настраиваем скорость. В нашем случае у боковых изображениях поставим значение=120, а у изображения посередине значение=110. Закройте редактирование блока, чтобы увидеть результат.
P.S.: Если значение установить меньше 100, то элементы при прокрутке будут двигаться вниз
Настраиваем параллакс на мобильном. В настройках в разделе «Параллакс» — «На мобильных» выбираем в выпадающем списке «Изменение скорости при прокрутке». Оставим значения такими же (120 и 110).
Всегда важно проверять как анимация будет выглядеть на мобильных
Всегда важно проверять как анимация будет выглядеть на мобильных
7
Адаптируем блок для различных устройств
Подбираем размер текста, перетаскиваем элементы так, чтобы они не выходили за границы контейнера. НО, так как у нас боковые изображения априори выходят за границы контейнера на компьютере, то на других устройствах тоже можно это сделать. Конечно же, если эти элементы не несут важную информацию для пользователей
Адаптируем под остальные устройства. Элементы, которые мы не хотим отображать на других устройствах прячем. Для этого нужно зайти в настройки элемента и в самом низу в разделе «Настройка видимости» убрать галочки
9
Добавляем ссылку на кнопку и вуаля! Поздравляем, блок готов 🔥
Interior design
АРХИТЕКТУРНОЕ ПРОЕКТИРОВАНИЕ / ДИЗАЙН ИНТЕРЬЕРОВ / ПРЕДМЕТНЫЙ ДИЗАЙН