Создание лендинга: Урок #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.  Сохраните изменения.



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

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

Мы используем файлы Cookie, чтобы сделать работу с сайтом проще и удобнее. Нажимая кнопку «Принять Cookie» или продолжая просмотр сайта, вы разрешаете их использование.
Подробная информация
 тут

Cookies в CMS Smart Engine