JQuery. Полноэкранная прокрутка (скроллинг)

Сегодня снова затронем тему одностраничных сайтов, которые отлично подходят для демонстрации продукта или продажи единичных товаров. Много направлено именно для таких ресурсов. И в нашем случае мы рассмотрим одну интересную и полезную вещь, а именно – полноэкранную прокрутку. Это еще можно назвать скроллингом или частично, так как этот эффект имеет что-то общее.

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