Лого SiteHere.ru

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

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

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

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

Суть эффекта: перед прокруткой к следующему блоку есть небольшая задержка, а затем страница переходит к следующему блоку. Анимация также происходит и при скролле в обратном направлении. Создается впечатление небольшой презентации 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 Часть

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

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

Javascript часть

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

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

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

Успехов!

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

32 комментария к записи
  • Иван

    Что то не получилось подключить… Вроде вставил все как надо, а не работает… 

     
    • Юрий Немец

      Иван, проверьте нет ли ошибок JS в консоли браузера.

       
  • Дмитрий

    при прокрутки между блоками "проплывает" белое поле, равное ширине экрана

    в чем может быть причина?

     
    • Юрий Немец

      Дмитрий, инспектором кода в браузере пользовались?

       
  • Дмитрий

    Разобрался. вопрос закрыт. спасибо

     
  • Chemist

    Как сделать чтобы прокрутка не сверху вниз была, а с права на лево?

     
    • Юрий Немец

      Доброго времени суток!

      У данной библиотеки есть такая возможность: Смотреть пример

       
  • Александр

    Добрый день! Подключил плагин как показано. В итоге ничего не прокручивается, в консоли ошибка Cannot read property 'replace' of undefined

     
    • Юрий Немец

      Добрый день, Александр!

      Рекомендую скачать архив с демо-примером и посмотреть как все устроено изнутри.

       
    • Богдан

      Вся соль в классе добавь класс section и все заработает

       

       
  • Александр

    так и сделал, скачал, посмотрел. ошибка возникает в файле плагина

     
  • Александр

    причем сам демо-пример работает, но на моем сайте нет

     
    • Юрий Немец

      Обратите внимание на то, какие плагины подключены на вашем сайте. Возможно, какой-то из них конфликтует с данным плагином.

       
  • Александр

    я даже все скрипты кроме jQuery отключал и все равно эта ошибка

     
    • Юрий Немец

      Александр, скачайте новую версию данного плагина с репозитория GitHub: здесь. Плагин постоянно обновляется, поэтому ошибка может решиться, если в вашем случае использовать самую последнюю версию данного плагина.

       
  • Илья Coder

    Не работает данные скрипт. Мозилла выводит такие ошибки и блокирует скрипт.

    ReferenceError: jQuery is not defined[Подробнее]  jquery.fullPage.min.js:8:163
    TypeError: $(…).fullpage is not a function[Подробнее]   kio:57:13

    Ничего не изменял, просто закинул ваши исходники на домен к себе. Не работает. test2.template31.ru

     
    • Юрий Немец

      Здравствуйте, Илья!

      В моих исходниках нет подключения плагина fullPage.js в области head.

      У вас возникает такая ошибка, потому что плагин fullPage.js зависит от библиотеки jQuery.

      Чтобы исправить данные ошибки, переместите подключение плагина fullPage.js после подключения jQuery в футер, но до кода инициализации скрипта. Должно получиться следующее:

      <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>
          $(document).ready(function() {
              $('#fullpage').fullpage({
                  anchors: ['block1', 'block2', 'block3', 'block4'],
                  menu: '#menu',
                  css3: true,
                  scrollingSpeed: 1000
              });
          });
      </script>

       

       
  • Дмитрий

    Добрый день! Всё получилось… Но при запуске веб-страницы отображается только block1. Вниз прокрутка не работает, но по меню перемещается. В консоли ошибок нет.

     
  • Глеб

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

     
    • Глеб

      Разобрался, теперь другой вопрос. Можно ли как-то обернуть меню, чтобы вставить в полосу прокрутки еще и логотип и еще какой-то текст. Попробовал завернуть в див с классом или id, итог: не работает фон к большому диву, а если указать фон к меню, то он перекрывает все остальное

       
  • Елена

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

     
  • Илья

    А у меня по какой-то причине не работает скроллинг на мобильных устройствах.

     
  • Екатерина

    Вообще не работает, то одна ошибка то другая… Скачала свежую версию с гитхаба, не помогло. 

     
  • Елена

    Лицензию просит) бесплатно больше не работает?

     
  • Константин

    Привет всем. Все работает, но есть вопрос — как это можно прикрутить к Joomla, правильнее, чтоб слишком не городить…
    Спасио.

     
    • Юрий Немец

      Добрый день, Константин!
      Сейчас это чистое HTML/CSS/JS решение и его можно прикрутить к любой CMS (WordPress, Joomla и другие).

      Сделать нужно, по аналогии с шаблоном:
      1. Разместить HTML код на нужной странице.
      2. Подключить CSS стили (если будут стилями темы Joomla, нужно будет скорректировать).
      3. Подключить JS файлы.

       
      • Константин

        Спасибо. Я так и предполагал. Надо сверстать нужны фрагмент HTML. 🙂

         
  • Константин

    Здравствуйте. При добавлении еще одного блока, по аналогии с 1,2,3,4, нет прокрутки на 5 блок и т. д. Где собака зарыта. Спасибо.

     
  • Константин

    Демо сайт http://museum.adv-studios.ru

     
  • Константин

    Спасибо. Разобрался… потерял…

     

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *