Сегодня снова затронем тему одностраничных сайтов, которые отлично подходят для демонстрации продукта или продажи единичных товаров. Много направлено именно для таких ресурсов. И в нашем случае мы рассмотрим одну интересную и полезную вещь, а именно – полноэкранную прокрутку. Это еще можно назвать скроллингом или частично, так как этот эффект имеет что-то общее.
Фишка в полноэкранной прокрутке заключается в том, что при прокрутке страницы область сайта прокручивается не постепенно, а поэкранно, все то, что попадает в область просмотра браузера. Для полного понимания можете посмотреть пример эффекта ниже. А мы начнем знакомство с JQuery-плагинами для Page Scroll.
Jquery-fsscroll
Плагин представляет из себя простой и «легкий» эффект полноэкранной прокрутки на основе jQuery. В нем есть несколько полезных параметров, с помощью которых можно управлять скоростью анимации, направлением прокрутки (горизонтально, вертикально) и т.д.
Подключение
<link rel="stylesheet" href="../src/jquery.fsscroll.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <script src="../src/jquery.fsscroll.js"></script> <!-- инициализировать и пример применения параметров--> <script> $('.container').fsScroll({ direction: 'vertical', duration: 350, keyboard: true, }) </script>
Разметка
<div class="container" data-fs-scroll> <div class="sections"> <div class="section section0"> <h1>Секция 1</h1> </div> <div class="section section1"> <h1>Секция 2</h1> </div> <div class="section section2"> <h1>Секция 3</h1> </div> <div class="section section3"> <h1>Секция 4</h1> </div> </div> </div>
Параметры
selectors — селектор
index — какой номер экрана показывать первым. По умолчанию 0
.
timing — кривая анимация. По умолчанию ease
.
duration — скорость анимации. По умолчанию 500
.
loop — цикл. По умолчанию false
.
pagination — показывать пагинацию. По умолчанию true
.
keyboard — поддержка клавиатуры. По умолчанию false
.
direction — направление прокрутке. По умолчанию vertical
.
beforeScroll — событие до...
afterScroll — событие после...
fullPage
Это более сложный плагин в плане параметров, эффектов и функций. Он полностью кроссбраузерный и даже на старых браузерах, таких как Internet Explorer 9, Opera 12, работает корректно. Поддерживает сенсор на мобильных устройствах. Вся документация по настройкам есть на оф. странице, к тому же все на русском. А в архиве, который вы скачаете, есть все примеры по каждой возможности плагина.
SONP-master
Третий плагин полноэкранной прокрутки из списка почти такой же, как и первый, в плане простоты и небольшого количества параметров. Плюс у него есть встроенный параллакс эффект, который добавляется с помощью специального класса.
Подключение
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script> <script src="../sonpScroll.js"></script>
Разметка
<!doctype html> <html> <head> <script src="jquery..."></script> <script src="sonpScroll.js"></script> </head> <body class="no-scroll"> <div class="sonp-section sonp-middle"> <p>Section middle size (50%)</p> </div> <div class="sonp-section sonp-full sonp-parallax"> <p>Section full size (100%) with parallax effect</p> </div> <div class="sonp-section sonp-small"> <p>Section small size (200px)</p> </div> </body> </html>