20.09.15, 21:28
0 комментарий
  Уроки

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

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

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

1 HTML структура

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

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

<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 — атрибут ссылки, который переходит к соответствующему якорю с таким же идентификатором.


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

<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

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

#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 код.

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



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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="js/jquery.fullPage.min.js"></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 — время скроллинга.


Вывод

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

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

ДЕМО

Посмотреть
пример

СКАЧАТЬ

Вес файла
54.05 Kb

Реклама

Напишите своё мнение

  • acuteaggressiveair_kissangel
    badbbbeachbeee
    biggrinbig_bossblumblush
    boastbombboredombye
    clappingcraycrazycurtsey
    dancedashdeclarediablo
    diroldon-t_mentiondownloaddrinks
    first_moveflirtfocusfool
    friendsgive_heartgive_rosegood
    hangheartheathelp
    hihunterhystericireful
    kingkisslaughlazy
    lolmail1mambaman_in_love
    mdamega_shokmoilmosking
    musicneanegativenew_russian
    okon_the_quietpardonparting
    partypilotpioneerpleasantry
    popcormpranksterprevedpunish
    roflrtfmrussiansad
    sarcasticscarescratchsearch
    secretsensoredshokshout
    slowsmilesmokesoldier
    soldier_girlsorryspitefulspruce_up
    stinkersuicidesunsuperstition
    swoonteasetenderthanks
    thisto_pick_ones_noseto_take_umbragetreaten
    umnikunknwvampirevava
    victorywackowhistlewink
    wizardyahooyesyu
    e101e102e103e104
    e105e106e107e108
    e109e110e111e112
    e113e114e115e116
    e117e118e119e120
    e121e122e123e124
    e125e126e127e128
    e129e130e131e132
    e133e134e135e136
    e137e138e139e140
    e141e142e143e144
    e145e146e147e148
    e149e150e151e152
    e153e154e155e156
    e157e158e159e160
    e161e162e163e164
    e165e166e167e168
    e169e170e171e172
    e173e174e175e176
    e177e178e179e180
    e181e182e183e184
    e185e186e187e188
    e189e190e191e192
    e193e194e195e196
    e197e198e199e200
    e201e202e203e204