
Октябрь 29, 2019 Запись была обновлена
Полноэкранная прокрутка лендинга — дизайн лендинга

Сегодня мы посмотрим как с помощью плагина можно создать полноэкранную прокрутку лендинга. То есть Ваш лендинг состоит из определенных блоков, и вот эти самые блоки будут сменяться только при прокрутке с небольшой задержкой. В таком стиле делают очень известные компании создают свои лендинги. А сегодня и Вы узнаете как просто создать такой дизайн лендинга самостоятельно.
Статьи на тему эффектов при прокрутке страницы:
Суть эффекта: перед прокруткой к следующему блоку есть небольшая задержка, а затем страница переходит к следующему блоку. Анимация также происходит и при скролле в обратном направлении. Создается впечатление небольшой презентации HTML.
Попробуйте прокрутить данный лендинг до конца, а затем используя меню:
Посмотреть примерСкачать
Также Вы можете посмотреть мини-курс и создать более сложный лендинг. Мини-курс находится здесь: "Лендинг за 60 минут".
Процесс смены блоков:
Как сделать такой дизайн лендинга?
1 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 — атрибут ссылки, который переходит к соответствующему якорю с таким же идентификатором.
Сейчас создадим структуру всех блоков:
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

Никаких стилей особых здесь нет, поэтому здесь размещу только стили для меню:
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 часть

Необходимые библиотеки:
- jQuery.min.js
- jquery.fullPage.min.js
Подключаем их:
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> следующий код:
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 консультацию!
Успехов!
С Уважением, Юрий Немец
Спасибо за ваше обращение!
Мы свяжемся с вами в течение 2-х часов (график работы: пн-пт, с 10 до 19)
Что то не получилось подключить… Вроде вставил все как надо, а не работает…
Иван, проверьте нет ли ошибок JS в консоли браузера.
при прокрутки между блоками "проплывает" белое поле, равное ширине экрана
в чем может быть причина?
Дмитрий, инспектором кода в браузере пользовались?
нет
Разобрался. вопрос закрыт. спасибо
Как сделать чтобы прокрутка не сверху вниз была, а с права на лево?
Доброго времени суток!
У данной библиотеки есть такая возможность: Смотреть пример
Добрый день! Подключил плагин как показано. В итоге ничего не прокручивается, в консоли ошибка Cannot read property 'replace' of undefined
Добрый день, Александр!
Рекомендую скачать архив с демо-примером и посмотреть как все устроено изнутри.
Вся соль в классе добавь класс section и все заработает
так и сделал, скачал, посмотрел. ошибка возникает в файле плагина
причем сам демо-пример работает, но на моем сайте нет
Обратите внимание на то, какие плагины подключены на вашем сайте. Возможно, какой-то из них конфликтует с данным плагином.
я даже все скрипты кроме jQuery отключал и все равно эта ошибка
Александр, скачайте новую версию данного плагина с репозитория GitHub: здесь. Плагин постоянно обновляется, поэтому ошибка может решиться, если в вашем случае использовать самую последнюю версию данного плагина.
Не работает данные скрипт. Мозилла выводит такие ошибки и блокирует скрипт.
Ничего не изменял, просто закинул ваши исходники на домен к себе. Не работает. test2.template31.ru
Здравствуйте, Илья!
В моих исходниках нет подключения плагина fullPage.js в области head.
У вас возникает такая ошибка, потому что плагин fullPage.js зависит от библиотеки jQuery.
Чтобы исправить данные ошибки, переместите подключение плагина fullPage.js после подключения jQuery в футер, но до кода инициализации скрипта. Должно получиться следующее:
Добрый день! Всё получилось… Но при запуске веб-страницы отображается только 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
Спасибо. Разобрался… потерял…
div потерял…