Сьогодні ми подивимося як за допомогою плагіна можна створити повноекранну прокрутку Лендінзі. Тобто Ваш Лендінгем складається з певних блоків, і ось ці самі блоки будуть змінюватися тільки при прокручуванні з невеликою затримкою. У такому стилі роблять дуже відомі компанії створюють свої Лендінзі. А сьогодні і Ви дізнаєтеся як просто створити такий дизайн Лендінзі самостійно.
Статті на тему ефектів при прокручуванні сторінки:
Суть ефекту: перед прокруткою до наступного блоку є невелика затримка, а потім сторінка переходить до наступного блоку. Анімація також відбувається і при Скролл в зворотному напрямку. Створюється враження невеликої презентації HTML.
Спробуйте прокрутити даний Лендінгем до кінця, а потім використовуючи меню:
Також Ви можете подивитися міні-курс і створити більш складний Лендінгем. Міні-курс знаходиться тут: "Лендінгем за 60 хвилин".
Процес зміни блоків:
Як зробити такий дизайн Лендінзі?
1 HTML структура
Спочатку створимо меню, щоб ми могли не тільки за допомогою прокрутки переміщатися по блокам, а також використовувати загальне меню.
Структура меню стандартна:
- #fullPage - це ідентифікатор загального блоку, в якому знаходяться наші 4 блоки.
- anchors - перерахування значень атрибутів data-anchor для функціонування меню.
- #menu - ідентифікатор меню.
- css3 - переміщення по блокам з анімацією.
- scrollingSpeed - час скролінгу.
Цікавий спосіб створення Лендінзі. Ефект підійде як для продає сторінки, так і для підписаний. Головне, добре опрацювати вміст блоків.
Якщо не виходить створити такий дизайн: Ви можете звернутися до мене за допомогою, попередньо записавшись на SKYPE консультацію!