Всем - привет! Как-то, в разделе "Ваши предложения" меня просили рассказать о том, как сделать поблочную прокрутку на landing page (я ее называю полноэкранной прокруткой, но увы, такого запроса нет, а я стараюсь более-менее, но все-таки оптимизировать статьи), и вот решил написать пост на эту тему.
Как и просили, делать будем на примере fullpage.js (это такой jQuery плагин), который упростит нам задачу. Если кто-то не в курсе, о чем идет речь, то посмотрите сначала пример:
Реализация поблочной прокрутке на сайте
Итак, так ка это jQuery плагин, то как обычно, первым делом подключаем сам jQuery, я сделаю это в конце страницы, так как вынесение скриптов в нижнюю область сайта позволяет ему грузиться быстрее, но это не всегда возможно, поэтому, в вашем случае может понадобиться подключение jQuery между тегами <head></head>:
<!-- Библиотека jQuery --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
Следующим шагом подключаем сам плагин. Давайте сначала добавим скрипты, а потом css файл. Скрипты подключать после jQuery. У меня они лежат по такому пути: libs/fullpage/
<script src="libs/fullpage/jquery.easings.min.js"></script> <script src="libs/fullpage/scrolloverflow.min.js"></script> <script src="libs/fullpage/jquery.fullPage.min.js"></script> <script> $(document).ready(function() { $('#fullpage').fullpage(); }); </script>
Последним скриптом производим инициализацию. Можно его вынести в отдельный файл, который будет срабатывать после загрузки всей страницы. Кстати, на странице плагина можно почитать об огромном количестве дополнительных настроек.
Теперь, давайте подключим css файл нашего плагина. Я сделаю это между тегам head, так как это один из файлов стилей, который влияет на общее отображение. Лежит он все в той-же папке fullpage:
<!-- CSS файл плагина fullpage --> <link href="libs/fullpage/jquery.fullPage.css" type="text/css" rel="stylesheet">
Теперь перейдем к html разметке. Суть работы плагина заключается в том, что весь контент нужно обернуть в div с id="fullpage", а блокам, по которым будет разделяться экран, и, соответственно, происходить прокрутка нужно добавить класс section
Сейчас я делаю пример с использование bootstrap и у меня получается такая структура:
<div id="fullpage"> <section class="section"> <div class="container"> <div class="row"> <div class="col-md-12"> <p>Первый экран</p> </div> </div> </div> </section> <section class="section"> <div class="container"> <div class="row"> <div class="col-md-12"> <p>Второй экран</p> </div> </div> </div> </section> <section class="section"> <div class="container"> <div class="row"> <div class="col-md-12"> <p>Третий экран</p> </div> </div> </div> </section> </div>
В принципе - на этом можно заканчивать, эффект мы реализовали. Но давайте сделаем еще и меню, которое будет прокручивать нас к нужному блоку. Так как начал делать с применением bootstrap, то давайте продолжим делать и дальше с применением этого замечательного фреймворка. Тем более, что пример с обычным меню есть на Github в инструкции к плагину.
Для того, чтобы сделать "якоря", к которым будет происходить прокрутка, блокам нужно указать специальный data атрибут data-anchor="", с произвольным названием. Например, у меня это home, about и portfolio.
Затем, нужно создать само меню. Я делаю это до обертки id="fullpage", которую мы сделали ранее, а затем сделаю его фиксированным в вверху экрана. Важно тегу li, задать атрибут data-menuanchor, в которых указать id блоков, к которым будет происходить прокрутка при клике на ссылку. Самим ссылкам тоже в атрибуте href указываем соответствующий id. И тегу ul нужно дать произвольный id, который позже укажем в настройках плагина. У меня это navigation.
Меню
<nav class="navbar navbar-default navbar-fixed-top" role="navigation"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul id="navigation" class="nav nav-justified"> <li data-menuanchor="home"><a href="#home">Главная</a></li> <li data-menuanchor="about"><a href="#about">О нас</a></li> <li data-menuanchor="portfolio"><a href="#portfolio">Портфолио</a></li> </ul> </div> </div> </nav>
Итоговая структура блоков выглядит следующим образом:
<div id="fullpage"> <section class="section" data-anchor="home"> <div class="container"> <div class="row"> <div class="col-md-12"> <p>Первый экран</p> </div> </div> </div> </section> <section class="section" data-anchor="about"> <div class="container"> <div class="row"> <div class="col-md-12"> <p>Второй экран</p> </div> </div> </div> </section> <section class="section" data-anchor="portfolio"> <div class="container"> <div class="row"> <div class="col-md-12"> <p>Третий экран</p> </div> </div> </div> </section> </div>
Помните я говорил, что нужно указать id тегу ul, так вот, теперь его нужно прописать там, где мы инициализировали плагин:
<script> $(document).ready(function () { $('#fullpage').fullpage(); menu: '#navigation' }); </script>
На этом - все. Ссылка на демо - вначале поста. А исходник - тут:
30 комментариев
Отлично! Спасибо! Давно искал,
А есть возможность сделать без якоря в адресной строке?
Привет. Попробую что-то придумать. Но это же готовый плагин, я не разработчик же. Если разберусь
Смотри, если прокрутка без навигации вверху, то можно так:
Тут количество пустых кавычек - количество блоков. Это вместо того скрипта, который был для инициализации.
Как убрать белую полосу при просмотре на мобильных устройствах?
пропала полоса прокрутки справа... не подскажите как вернуть?
Al'Sabyr, здравствуйте! У меня такая же проблема. Вы решили её? Поделитесь, пожалуйста.
спасибо
Здравствуйте, подскажите пожалуйста, как подправить скрипт чтобы скролл по секциям не работал для мобильных устройств?
Евгений,
if(window.innerWidth > 720) {
$(document).ready(function () {
$('#fullpage').fullpage();
});
}
То есть теперь скрит инициируется только на разрешениях больше 720 px
Алмаз, да, но, наверное, с оговоркой, что при загрузке страницы оно (разрешение) уже было больше 720px.
Добрый день! Все работает, но появилась необходимость сделать текст на одном из слайдов! Текста много и пришлось добавить overflow: auto. Проблема в том, что текст не листается скролом, а переходит на следующий слайд. Как сделать, чтобы прокручивался текст до конца, а затем уже слайд перелистывался? Спасибо!
normalScrollElements: '#section1 .element', Вот ток сам не знаю как продолжить прокрутку автоматом, ниже вопрос задал автору статьи. Похоже что он ни на твой вопрос не знает ответа, а на мой и подавно.
Как сделать небольшую прокрутку на одном определенном экране, вот как тут __http://esytwin.ru/#rangesmall.
Изначально мы прокручиваем все элементы одного экрана, докрутив до конца всех элементов данного экрана, нас перекидывает на следующий и так далее. Как это реализовать?
Здравствуйте! Данный функционал не работает в IE8. Не кидайте в меня тапком))) Но все же, есть необходимость сделать его работоспособным в этом древнем браузере. Как порешать такую проблему?
Здравствуйте! Поможете поставить это на WordPress?
Давайте обсудим цену. Почта: ruscosmonavt@gmail.com
skype: ruscosmonavt
Спасибо за блог, очень много полезного для себя нашел.
Делал лэндинг и брал у тебя информацию о анимации при прокрутке, с помощью wow.js. Решил добавить туда этот скрипт и wow.js отказался работать. Я разобрался и решил поделиться с вами.
Если вы используете wow.js вместе с fullpage.js то в скрипте инициализации должно быть так:
Я использовал версию без якорей, для тех кто хочет с якорями:
Важно! При таком подходе появятся полосы прокрутки, чтобы их убрать пишем в CSS
Привет. Спасибо большое, что не оставил без внимание, и нашел время, чтобы поделиться своим решением.
Сверстал страницу, в IE не хочет работать, пишет "Internet Explorer запретил выполнение сценариев и элементов ActiveX на этой странице".
Подскажите, как исправить?
Андрей, В Internet Explorer в Меню > Сервис > Свойства обозревателя > Дополнительно и ставим флажок: "Разрешать запуск активного содержимого файлов на моем компьютере". Когда загрузите на сервер, этого сообщение не будет, даже если вы этого не сделаете. То есть оно вылезает, только в если локальный файл открывать.
Плагин, конечно, интересный. Но больше имиджевый, а не информационный. Идеален для рекламных сайтов/кампаний - когда на одну большую картинку накладывается пара предложений текста. На моб устройствах отключал - не было необходимости в нем.
Красавчик, кратко и лаконично
У меня не вышло. Сможете помочь сделать?
Геннадий, в статье же есть демо и исходник готовый, который работает... Чем помочь-то?
dimadv7, боюсь засорять своими глупыми вопросами чат, можно в личной переписки?. 9797773@mail.ru
Геннадий, да пишите сюда, ваши вопросы могут помочь и другим подписчикам. А, если что, уйдем в личные сообщения. Ничего не глупые, смело задавайте. Тут много новичков
почему никто не поднимает вопрос о том, как быть когда содержимое блока по высоте больше экрана? как нужно доработать этот скрипт так чтобы доходя до края блока срабатывал moveUp или moveDown задумайтесь, это было бы очень полезно!
Дмитрий, потому что когда выбирают поход с поблочной прокруткой, нужно не допускать, чтобы содержимое было больше размера экрана. Думал это очевидно, а если этого не избежать, то просто на таком разрешении нужно отключить поблочную прокрутку и вернуться к обычной.
знаю много примеров когда без этого никак, есть даже js плагин в котором это реализовано, scrollify.js я столкнулся с этой проблемой и мне он очень помог
Дмитрий, отлично. В любом случае можно просто сделать внутреннюю прокрутку у блока при помощи overflow-y: scroll. Возможно есть еще какие-то подводные камни и это не все, но должно помочь, а так, если выбираем поблочную прокрутку, то контент в 99.9% случаев должен помещаться в экран устройства.