📨 Каналы и чаты для тех специалистов онлайн школ.

Интересное и полезное в одной папке 👉 добавить себе

Посмотреть все каналы и чаты
https://t.me/addlist/oknXCN4XIWU1ZjAy

Поблочный скролл страницы

Модный эффект применяемый на современных страницах чтобы порционно показывать информацию пользователю дабы избежать каши. Я тоже люблю такую подачу информации, и решил поделиться с вами, как можно сделать поблочный скролл на Геткурсе 😏

Сперва давайте разместим наши блоки на странице, заверстаем их как надо с вашим дизайном, и потом применим этот эффект. Кстати, вы можете не растягивать ваши блоки на 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.: Учтите что это свойство нужно прописывать в самый последний момент на странице, когда вы всё сделаете, и пролистать редактор наверх, чтобы если что закомментровать его, т.к. он скроет скролл даже в редакторе 😂

#полезная_фишка

Друзья, хочу напомнить что вы можете использовать этот канал как библиотеку полезных фишек, решений и лайфхаков для Геткурса 😉

Постов в канале уже великое множество, и возможно кто-то ищет какое-то решение и ждёт подходящего поста. Каждый свой пост я подписываю хештегами:

#полезная_фишка — это разработка/решение для улучшения функциональности и визуального стиля Геткурса

#лайфхак — это упрощения, которые помогают сделать жизнь на платформе гораздо легче, или помогают более быстрому и понятному взаимодействию

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

Приветствую вас, друзья! Давно сюда ничего не постил 😉 Надеюсь вы используете канал как библиотеку полезных фишек, которые я сюда выкладывал, в этом так же была моя основная задумка. Вскоре появятся новые фишки, которые я обязательно выложу в канал, а пока я хотел бы сделать анонс самой крупной народной премии техспециалистов в области EdTech это GetTechAward!

Сам я не номинировался ни на какую премию, т.к. считаю что мне никому ничего доказывать не нужно 😂 Но хочу отметить моих талантливых коллег, которые попали в номинации, поддержите их, они этого заслуживают 😎

🏆 ПРОГОЛОСОВАТЬ ТУТ