Повноекранна прокрутка лендінзі - дизайн лендінзі

Сьогодні ми подивимося як за допомогою плагіна можна створити повноекранну прокрутку Лендінзі. Тобто Ваш Лендінгем складається з певних блоків, і ось ці самі блоки будуть змінюватися тільки при прокручуванні з невеликою затримкою. У такому стилі роблять дуже відомі компанії створюють свої Лендінзі. А сьогодні і Ви дізнаєтеся як просто створити такий дизайн Лендінзі самостійно.

Статті на теми ефектів при прокручуванні сторінки:

• Анімована шапка для Лендінзі
• Оригінальний ефект для Лендінзі при прокручуванні сторінки
• Анімація для Лендінзі - створення анімації на Лендінзі

Суть ефекту: перед прокруткою до наступного блоку є невелика затримка, а потім сторінка переходить до наступного блоку. Анімація також відбувається і при Скролл в зворотному напрямку. Створюється враження невеликої презентації HTML.

Спробуйте прокрутити даний Лендінгем до кінця, а потім використовуючи меню:

Подивитися прімерСкачать

Також Ви можете подивитися міні-курс і створити більш складний Лендінгем. Міні-курс знаходиться тут: "Лендінгем за 60 хвилин".

Відео: Landing page - Лендінгем Пейдж: огляд ідеальних Лендінзі за 13 хвилин

Процес зміни блоків:

Як зробити такий дизайн Лендінзі?

1 HTML структура

Спочатку створимо меню, щоб ми могли не тільки за допомогою прокрутки переміщатися по блокам, а також використовувати загальне меню.

Структура меню стандартна:

123456

lt;ul id="Menu"gt;lt;li data-menuanchor="Block1"gt; lt;a href="# Block1"gt; Блок 1lt;/agt; lt;/ligt;lt;li data-menuanchor="Block2"gt; lt;a href="# Block2"gt; Блок 2lt;/agt; lt;/ligt;lt;li data-menuanchor="Block3"gt; lt;a href="# Block3"gt; Блок 3lt;/agt; lt;/ligt;lt;li data-menuanchor="Block4"gt; lt;a href="# Block4"gt; Блок 4lt;/agt; lt;/ligt;lt;/ulgt;

Поясню атрибути:

• data-menuanchor - атрибут необхідний для формування меню.
• href - атрибут посилання, який переходить до відповідного якоря з таким же ідентифікатором.

Зараз створимо структуру всіх блоків:

1234567891011121314

lt;div id="Fullpage"gt;lt;div class="Section" data-anchor="Block1"gt;lt;/divgt;lt;div class="Section" data-anchor="Block2"gt;lt;/divgt;lt;div class="Section" data-anchor="Block3"gt;lt;/divgt;lt;div class="Section" data-anchor="Block4"gt;lt;/divgt;lt;/divgt;

Є загальний блок з ідентифікатором "Fullpage", в якому знаходяться блоки з вмістом. Тут є один незнайомий для Вас атрибут:

• data-anchor - даний атрибут для функціонування меню, яке ми змусимо працювати трохи пізніше.

2 стилі CSS

Відео: Дизайн Лендінзі в фотошоп Часть 2

Ніяких стилів особливих тут немає, тому тут розміщу тільки стилі для меню:

Відео: Дизайн Лендінзі

12345678910111213141516171819202122232425262728293031323334

#menu {height: 60px-left: 0-margin: 0-padding: 0-position: fixed-top: 0-width: 100%-z-index: 70-text-align: right-background: #fff-}#menu li {background: rgba(255, 255, 255, 0.5)-border-radius: 4px-color: # 000-display: inline-block-margin: 10px-}/ * Стиль посилання коли активний відповідний блок * /#menu li a, #menu li.active a {display: block-padding: 9px 18px-text-decoration: none-color:#ccc-}/ * Стиль елемента списку коли активний відповідний блок * /#menu li.active {background: rgba(0, 0, 0, 0.5)-color: #fff-}

Залишилося підключити скрипт і написати невеликий JS код.

3 JS частина

Необхідні бібліотеки:

• jQuery.min.js
• jquery.fullPage.min.js

Підключаємо їх:

Відео: Як створити ідеальний Лендінгем Пейдж з високою конверсією?

12

lt;script src="Https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"gt; lt;/scriptgt;lt;script src="Js / jquery.fullPage.min.js"gt; lt;/scriptgt;

Далі вставляємо між тегами наступний код:

12345678

$(document).ready(function() {$(`#fullpage`).fullpage({anchors: [`Block1`, `Block2`, `Block3`, "Block4 `],menu: `#menu`,css3: true,scrollingSpeed: 1000})-})-

Поясню код:

• #fullPage - це ідентифікатор загального блоку, в якому знаходяться наші 4 блоки.
• anchors - перерахування значень атрибутів data-anchor для функціонування меню.
• #menu - ідентифікатор меню.
• css3 - переміщення по блокам з анімацією.
• scrollingSpeed - час скролінгу.

висновок

Цікавий спосіб створення Лендінзі. Ефект підійде як для продає сторінки, так і для підписаний. Головне, добре опрацювати вміст блоків.

Якщо не виходить створити такий дизайн: Ви можете звернутися до мене за допомогою, попередньо записавшись на SKYPE консультацію!

Успіхів!