Если вам нравится такая реализация, то дальше давайте рассмотрим как сделать так же на своем сайте.
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 - отлично подходит для этого. Потому как там размещение блоков с минимальной информацией приветствуется.
Учитывая выше сказанное, могу предложить совет. В паре с этим скриптом можно найти еще какой-то для определения устройства. Чтобы на мобильных устройствах данный скрипт отключался.
На этом все, спасибо за внимание. 🙂
