X
Юрий Немец

Полноэкранная прокрутка лендинга — дизайн лендинга

Сегодня мы посмотрим как с помощью плагина можно создать полноэкранную прокрутку лендинга. То есть Ваш лендинг состоит из определенных блоков, и вот эти самые блоки будут сменяться только при прокрутке с небольшой задержкой. В таком стиле делают очень известные компании создают свои лендинги. А сегодня и Вы узнаете как просто создать такой дизайн лендинга самостоятельно.

Статьи на тему эффектов при прокрутке страницы:

Суть эффекта: перед прокруткой к следующему блоку есть небольшая задержка, а затем страница переходит к следующему блоку. Анимация также происходит и при скролле в обратном направлении. Создается впечатление небольшой презентации HTML.

Попробуйте прокрутить данный лендинг до конца, а затем используя меню:

Посмотреть примерСкачать

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

Процесс смены блоков:

Как сделать такой дизайн лендинга?

1 HTML структура

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

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

HTML КОД
1
2
3
4
5
6

<ul id="menu">
    <li data-menuanchor="block1"><a href="#block1">Блок 1</a></li>
    <li data-menuanchor="block2"><a href="#block2">Блок 2</a></li>
    <li data-menuanchor="block3"><a href="#block3">Блок 3</a></li>
    <li data-menuanchor="block4"><a href="#block4">Блок 4</a></li>
</ul>

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

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

Сейчас создадим структуру всех блоков:

HTML КОД
1
2
3
4
5
6
7
8
9
10
11
12
13
14

<div id="fullpage">
    <div class="section" data-anchor="block1">
        <!-- Содержимое 1-го блока -->
    </div>
    <div class="section" data-anchor="block2">
        <!-- Содержимое 2-го блока -->
    </div>
    <div class="section" data-anchor="block3">
        <!-- Содержимое 3-го блока -->
    </div>
    <div class="section" data-anchor="block4">
        <!-- Содержимое 4-го блока -->
     </div>
</div>

Есть общий блок с идентификатором "fullpage", в котором находятся блоки с содержимым. Здесь есть один незнакомый для Вас атрибут:

  • data-anchor — данный атрибут для функционирования меню, которое мы заставим работать немного позже.

2 Стили CSS

Никаких стилей особых здесь нет, поэтому здесь размещу только стили для меню:

CSS КОД
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

#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 часть

Необходимые библиотеки:

Подключаем их:

HTML КОД
1
2

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="js/jquery.fullPage.min.js"></script>

Далее вставляем между тегами <script> </script> следующий код:

Javascript КОД
1
2
3
4
5
6
7
8

$(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 консультацию!

Успехов!

С Уважением, Юрий Немец

Категории: jQuery