Поблочный скролл страницыМодный эффект применяемый на современных страницах чтобы
порционно показывать информацию пользователю дабы избежать каши. Я тоже люблю такую подачу информации, и решил поделиться с вами, как можно сделать поблочный скролл на Геткурсе
😏Сперва давайте разместим наши блоки на странице, заверстаем их как надо с вашим дизайном, и потом применим этот эффект. Кстати, вы можете не растягивать ваши блоки на
100vh высоты экрана, скрипт сделает это за вас. Но чтобы избежать эффекта начального "масштабирования" при загрузке контента на сайте, всё же можно сделать блокам высоту 100vh (делается это с помощью обложки в блоке, если там не предусматривается обложка то можно её и не ставить вовсе).
Для начала нам нужно подгрузить несколько скриптов и стилей для плагина, который будет манипулировать страницей при скролле. Данные теги нужно поставить в Настройки страницы, перейти в Расширенные настройки -> Показать дополнительные настройки и вставить в "
Теги в разделе HEAD":
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.7/jquery.fullpage.min.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.7/vendors/jquery.easings.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.7/jquery.fullpage.extensions.min.js"></script>
После этого не забудьте сохранить и опубликовать страницу. Далее, нам нужно присвоить классы нашим блокам, назовём их
scroll-block-1,
scroll-block-2 и
scroll-block-3 соответственно
(см. на скриншоте). Не обязательно так называть, но эти классы в дальнейшем нам понадобятся
для перечисления в скрипте, вы так же можете поставить и свои. Ну и остаётся только поставить следующий скрипт в конец страницы в JS блок:
$(document).ready(function() {
// Здесь указать классы блоков, которые есть на странице
var sections = $(".scroll-block-1, .scroll-block-2, .scroll-block-3");
sections.wrap("<div class='section'></div>");
$(".section").wrapAll("<div id='fullpage'></div>");
window.page = $('#fullpage').fullpage({
css3: true,
scrollBar: true,
});
});В переменной
sections указываем те самые классы блоков, которые мы разметили в редакторе. Именно они и будут листаться в полноэкранном поблочном режиме. Рекомендую на такой странице размечать все блоки, иначе прокрутка может повести себя неадекватно
🏃P.S. На последок: для более углублённого эффекта скроллинга страницы без правого скролл-бара, можете скрыть его поставив CSS блок на страницу и прописав там
body { overflow: hidden !important; }P.S.S.: Учтите что это свойство нужно прописывать в самый последний момент на странице, когда вы всё сделаете, и пролистать редактор наверх, чтобы если что закомментровать его, т.к. он скроет скролл даже в редакторе
😂#полезная_фишка
