Создание прокрутки страницы лендинга

Здарова! Давайте посмотрим как с помощью JQuery-плагина можно создать прокрутку лендинга. В целом любой лендинг состоит из блоков, поэтому попробуем сделать так, чтобы эти блоки сменяли друг друга с небольшой задержкой. Если вы видели сайты типа лендинга, то должны были заметить, что такой стиль использует очень много известных компаний. Поэтому сегодня Вы узнаете как сделать такой дизайн лендинга самостоятельно.

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

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

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

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

<ul id="menu">
    <li data-menuanchor="block1"><a href="#block1">И раз</a></li>
    <li data-menuanchor="block2"><a href="#block2">И два</a></li>
    <li data-menuanchor="block3"><a href="#block3">И три</a></li>
    <li data-menuanchor="block4"><a href="#block4">И четыре</a></li>
</ul>

data-menuanchor — атрибут для формирования меню.
href — ссылка-якорь.
Сейчас создадим структуру самих блоков:

<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 — атрибут для функционирования меню, оно заработает немного позже.

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

#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;
}

Подключаем скрипт и пишем небольшой инициализатор данного скрипта.

<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> следующий код:

$(document).ready(function() {
    $('#fullpage').fullpage({
        anchors: ['block1', 'block2', 'block3', 'block4'],
        menu: '#menu',
        css3: true,
        scrollingSpeed: 1000
    });
});

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

Крутой способ создания лендинга, а главное не сложный и подойдет для начинающего программиста. Сам эффект подойдет как для продающей страницы, так и для подписной. Не забывайте! Самое главное это хорошо проработать содержимое блоков. Всем удачи :)