Полноэкранная прокрутка лендинга — дизайн лендинга » Techno-Co — Всё для вебмастера, для создание сайтов с нуля. {title}

24.09.2015
Без рубрики

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

1 HTML структура

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

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

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

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

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

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

2 Стили CSS

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

#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 код.Необходимые библиотеки: jQuery.min.js
jquery.fullPage.min.js Подключаем их:

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

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

Поясню код:

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

Вывод

Интересный способ создания лендинга. Эффект подойдет как для продающей страницы, так и для подписной. Главное, хорошо проработайте содержимое блоков.

Автор урока: Юрий Немец