Создание лендинга: Урок #5

В данном уроке мы покажем, как создать анимацию при прокрутке экрана.

Cоздание анимации при прокрутке

Шаг #1. В разделе «Блоки» на панели инструментов выберите «Адаптивный блок» → перетащите элемент в среду визуальной верстки.

Шаг #2. Нажмите на блок в любом свободном месте → в нижнем или в верхнем углу блока появится иконка «Настройки» → нажмите на иконку.

Шаг #3. В «Настройках» укажите высоту блока - 443 px.

Шаг #4. Нажмите на иконку «Оформление» → в разделе «Фон блока» нажмите «Выбрать фон» → загрузите изображение с компьютера или из интернета.

Шаг #5. Ниже в выпадающем списке выберите параметр «Заполнить».

Шаг #6. Укажите ориентацию по центру.

Шаг #7. В разделе «Эффекты прокрутки» выберите «Parallax».

Шаг #8. В разделе «Медиа» на панели инструментов выберите «Фото» → перетащите элемент в среду визуальной верстки.

Шаг #9. Создайте новый альбом, нажав на кнопку «+» в левом нижнем углу окна → нажмите на текст «Новый альбом» и задайте свое название (название альбома: Иконки).

Шаг #10. Загрузите изображения с компьютера или из интернета (Если ваша картинка белая или имеет прозрачный фон, то в превью она может сливаться с белым фоном в общем списке изображений. Рядом с иконкой «+» при необходимости можно поменять фон превью с белого на черный и наоборот) .

Шаг #11. Нажмите на изображение №1, которое вы только что загрузили → в появившейся панели «Информация» установите ширину и высоту изображения (ширина: 80 px, высота: 80 px) → в этой же панели переключитесь во вкладку «Ориентация» → укажите ориентацию объекта (сверху, слева) → укажите отступы от базовой точки (по оси x: 9.1 %, по оси y: 100 px).

Шаг #12. В разделе «Наполнение» на панели инструментов выберите «Текст» → перетащите элемент в среду визуальной верстки.

Шаг #13. Нажмите на текст → над текстом (в верхнем левом углу) появятся иконки с возможными действиями → нажмите на иконку «Настройки» (знак шестеренки) → выберите стиль текста (Текст белый (16 px)).

Шаг #14. Над текстом (в верхнем левом углу) нажмите на иконку «Редактировать» (знак карандаша) → вставьте или наберите текст (Маникюр/ Различные виды маникюра и педикюра с возможностью совмещения и комбинирования с другими видами ухода.) → выделите данный текст → в текстовом редакторе выберите ориентацию текста по центру → отбейте интервалы межу абзацами.

Шаг #15. Выделите заголовок (Маникюр) → в текстовом редакторе выберите стиль для заголовка (Текст белый (24 px)) → задайте данному тексту заголовок уровня H3.

Шаг #16. Нажмите на созданный текст → укажите ориентацию объекта (сверху, слева) → укажите отступы от базовой точки (по оси x: 2 %, по оси y: 182 px) → переключитесь во вкладку «Информация» → в появившейся панели укажите ширину текстового элемента (ширина: 20%).

Шаг #17. Выделите все элементы → в панели слоев выберите действие «Группировка элементов» или нажмите (Ctrl+G).

Шаг #18. Нажмите на созданную группу → в появившейся панели ««Информация» установите ширину (ширина: 20%) → в этой же панели переключитесь во вкладку «Ориентация» → проверьте ориентацию объекта (по верху, слева) → проверьте отступы (по оси x: 2 %, по оси y: 100 px)

Шаг #19. Нажмите на группу → над группой (в верхнем левом углу) появятся иконки с возможными действиями. Нажмите на иконку «Копировать» (знак «+») → в появившейся панели «Ориентация» установите расположение группы→ укажите ориентацию объекта (по центру, сверху) → укажите отступы от базовой точки (по оси x: 27.3 %, по оси y: 100 px).

Шаг #20. Нажмите на текст, в скопированной группе → над текстом (в верхнем левом углу) появятся иконки с возможными действиями. Нажмите на иконку «Редактировать» (знак карандаша) → вставьте или наберите новый текст (Стрижка и окрашивание/ Окрашивание щадящими современными красками. Уход и выпрямление волос. Професиональное лечение поврежденных волос.).

Шаг #21. Нажмите на иконку, в скопированной группе → над изображением (в верхнем левом углу) появятся иконки с возможными действиями. Нажмите на иконку «Заменить фото» → выберите необходимую иконку.

Шаг #22. Нажмите на группу №2 → над группой (в верхнем левом углу) появятся иконки с возможными действиями. Нажмите на иконку «Копировать» (знак «+») → переместите скопированную группу правее.

Шаг #23. Нажмите на текст, в скопированной группе → над текстом (в верхнем левом углу) появятся иконки с возможными действиями. Нажмите на иконку «Редактировать» (знак карандаша) → вставьте или наберите новый текст (Уход за лицом/ Инновационный подход к уходу за кожей с применением новых методик и аппаратных технологий. Инъекционные методы и ручной массаж.).

Шаг #24. Нажмите на иконку в скопированной группе → над изображением (в верхнем левом углу) появятся иконки с возможными действиями. Нажмите на иконку «Заменить фото» → выберите необходимую иконку.

Шаг #25. Нажмите на группу №3 → над группой (в верхнем левом углу) появятся иконки с возможными действиями. Нажмите на иконку «Копировать» (знак «+») → переместите скопированную группу правее.

Шаг #26. Нажмите на текст, в скопированной группе → над текстом (в верхнем левом углу) появятся иконки с возможными действиями. Нажмите на иконку «Редактировать» (знак карандаша) → вставьте или наберите новый текст (Уход за телом/ Спа-программы для расслабления. Курсовые программы для похудения и повышения тонуса. Обертывания, массаж и прессотерапия.).

Шаг #27. Нажмите на иконку, в скопированной группе (либо выберите иконку в панели слоев) → над изображением (в верхнем левом углу) появятся иконки с возможными действиями. Нажмите на иконку «Заменить фото» → выберите необходимую иконку.

Шаг #28. Нажмите на группу №4 → в появившейся панели «Ориентация» укажите отступы от базовой точки по оси x (по оси x: 78 %).

Шаг #29. Выделите все группы (важно, чтобы последние две созданные группы - группа №3 и №4 находились не выше группы №1 и №2) → в появившейся панели перейдите во вкладку «Выравнивание» → выберите вертикальное выравнивание: по верху → перейдите во вкладку «Специальное» → выберите распределить: по горизонтали.

Шаг #30. Нажмите на группу №1 → нажмите на иконку → над изображением (в верхнем левом углу) появятся иконки с возможными действиями. Нажмите на иконку «Эффекты» → выберите анимацию при прокрутке экрана → тип анимации: дуга → укажите задержку анимации 0.2 секунды.

Шаг #31. Нажмите на группу №2 → нажмите на иконку → над изображением (в верхнем левом углу) появятся иконки с возможными действиями. Нажмите на иконку «Эффекты» → выберите анимацию при прокрутке экрана → тип анимации: дуга → укажите задержку анимации 0.4 секунды.

Шаг #32. Нажмите на группу №3 → нажмите на иконку → над изображением (в верхнем левом углу) появятся иконки с возможными действиями. Нажмите на иконку «Эффекты» → выберите анимацию при прокрутке экрана → тип анимации: дуга → укажите задержку анимации 0.6 секунд.

Шаг #33. Нажмите на группу №4 → нажмите на иконку → над изображением (в верхнем левом углу) появятся иконки с возможными действиями. Нажмите на иконку «Эффекты» → выберите анимацию при прокрутке экрана → тип анимации: дуга → укажите задержку анимации 0.8 секунд.

Шаг #34. Нажмите на группу №1 → нажмите на текст → над элементом (в верхнем левом углу) появятся иконки с возможными действиями. Нажмите на иконку «Эффекты» → выберите анимацию при прокрутке экрана → тип анимации: проявление снизу → укажите задержку анимации 0.2 секунды.

Шаг #35. Нажмите на группу №2 → нажмите на текст → над элементом (в верхнем левом углу) появятся иконки с возможными действиями. Нажмите на иконку «Эффекты» → выберите анимацию при прокрутке экрана → тип анимации: проявление снизу → укажите задержку анимации 0.4 секунды.

Шаг #36. Нажмите на группу №3 → нажмите на текст → над элементом (в верхнем левом углу) появятся иконки с возможными действиями. Нажмите на иконку «Эффекты» → выберите анимацию при прокрутке экрана → тип анимации: проявление снизу → укажите задержку анимации 0.6 секунд.

Шаг #37. Нажмите на группу №4 → нажмите на текст → над элементом (в верхнем левом углу) появятся иконки с возможными действиями. Нажмите на иконку «Эффекты» → выберите анимацию при прокрутке экрана → тип анимации: проявление снизу → укажите задержку анимации 0.8 секунд.

Шаг #38. Сохраните изменения.

В следующем уроке вы узнаете, как создать анимированный слайдер.

Была ли полезна для вас данная статья?