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