Поблочная прокрутка на странице landing page

Віталий

6 років ago

Поблочная прокрутка на странице landing page

Доброго времени суток. 🙂

Давно имеется небольшой скрипт, который помогает организовать на сайте интересную прокрутку, скроллинг. Суть такого скроллинга, в том чтобы прокрутка совершалась по блочно. В отличии от обычной прокрутки, когда при скролле вы двигаетесь небольшими промежутками, при такой прокрутке, вас перекидывает от блока к блоку. Смотрится такой эффект интересно и может придать вашей странице индивидуальности и необычности. Применять его можно, например, на своем сайте или на посадочной странице - landing page. Пример такого скроллинга можно увидеть в примере ниже.

Если вам нравится такая реализация, то дальше давайте рассмотрим как сделать так же на своем сайте.

HTML разметка

С разметкой все просто. Основным блокам на странице нужно присвоить класс - anchor. Данный класс задан в скрипте, о котором я напишу позже. так что если решите его поменять не забудьте сделать это в скрипте. В итоге на вашей странице должна получится такая сетка

<div class="anchor">
// Тут содержание блока
</div>
<div class="anchor">
// Тут содержание блока
</div>
<div class="anchor">
// Тут содержание блока
</div>
<div class="anchor">
// Тут содержание блока
</div>

Если вы разместите что-то вне блоков с классом anchor, то оно может быть вне видимой зоны при прокрутке. Так что строить структуру страницы нужно именно внутри блоков anchor.

CSS стили

По сути, можно вообще стили не добавлять никакие, все зависит от ваших нужд. В примере я сделал так, чтобы на странице был только один блок в зоне видимости. Сделал я это благодаря тому, что присвоил параметр высоты для блока - 100vh.

.anchor{
height:100vh;
}

jQuery скрипт

Чтобы все заработало нужно добавить скрипт, так как он работает на основе jQuery, то нужно сначала убедится что подключена библиотека. Посмотрите в коде своего сайта или страницы. Если нет схоже строки с этой, то добавьте ее:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

Только после нее нужно добавлять скрипт. Если вы не знаете как и куда добавлять библиотеку и скрипт, ознакомьтесь со статьей - Как и где подключить скрипт?. Кстати, версия библиотеки мжет быть другой, так что, не обязательно - 3.1.0.

Скрипт выглядит следующим образом:

<script>
var anchors = [];
var currentAnchor = -1;
var isAnimating  = false;
$(function(){
    function updateAnchors() {
        anchors = [];
        $('.anchor').each(function(i, element){
            anchors.push( $(element).offset().top );
        });
    }
    $('body').on('mousewheel', function(e){
        e.preventDefault();
        e.stopPropagation();
        if( isAnimating ) {
            return false;
        }
        isAnimating  = true;
        if( e.originalEvent.wheelDelta >= 0 ) {
            currentAnchor--;
        }else{
            currentAnchor++;
        }
        if( currentAnchor > (anchors.length - 1) 
           || currentAnchor < 0 ) {
            currentAnchor = 0;
        }
        isAnimating  = true;
        $('html, body').animate({
            scrollTop: parseInt( anchors[currentAnchor] )
        }, 500, 'swing', function(){
            isAnimating  = false;
        });
    });
    updateAnchors();   
});
</script>

Особо разбирать скрипт не имеет смысла. Обратить внимание нужно на пару элементов.

8 строка - $('.anchor') - тут указан класс блоков которые нужно перелистывать. То о чем я говорил в начале, если решите изменить его название, менять нужно тут тоже.
31 строка - значение 500 - это скорость анимации в миллисекундах. Прокрутка между блоками будет происходить за пол секунды. Можете изменить значение, чтобы ускорить или замедлить.

Вот на сколько прост данный способ для необычного скроллинга. Сложностей здесь нет, но есть важные моменты, о которых следует знать!

Скроллинг ведется только между блоков с классом anchor. Когда скролл доходит к последнему блоку, скрипт возвращает вас к первому. Следовательно, если вы разместите что-то вне этих блоков, оно будет пролистываться.
Обычный скролл не работает. Если ваш блок будет выходить за пределы экрана, видимой его части - то вы не сможете прокрутить его немножко. чтобы увидеть. Вас перебросит на следующий блок. Поэтом блоки должны быть небольшими и учитывать этот момент. Landing page - отлично подходит для этого. Потому как там размещение блоков с минимальной информацией приветствуется.

Учитывая выше сказанное, могу предложить совет. В паре с этим скриптом можно найти еще какой-то для определения устройства. Чтобы на мобильных устройствах данный скрипт отключался.

На этом все, спасибо за внимание. 🙂

Exit mobile version