Матвей Земсков

Заметки веб-мастера

Воскресенье, 12 апреля 2020 13:28

Создаем свой собственный эффект прокрутки страницы с помощью Roll.js

Оцените материал
(4 голосов)

В интернете вы можете найти десятки библиотек прокрутки страниц. Большинство из них написаны на JavaScript и имеют свои собственные эффекты анимации при прокрутке, которые вы можете настроить для одностраничных макетов и многого другого.

Но как насчет программирования своих собственных эффектов прокрутки? А что, если вы просто хотите проследить, насколько вниз прокручивается страница пользователя?

Roll.js - это та библиотека, которую вам поможет в этом. Это очень маленький и простой в использовании скрипт с открытым исходным кодом. Вы можете «заставить» его работать всего несколькими строками JavaScript. И что самое приятное, она не заставляет вас выполнять какие-либо действия, а просто предоставляет инструменты для создания собственных эффектов прокрутки.

пример использование Roll.js

Цель этой библиотеки - помочь разработчикам структурировать свои эффекты прокрутки без особых усилий.

Если вы взгляните на основной репозиторий на gitHub, то там вы найдете довольно полную инструкцию по установке библиотеки, а также примеры ее использования. Вы можете вызывать функции для вычисления насколько посетитель прокрутил страницу или определить добрался ли он до определенного места на странице.

Лучше всего это работает на одностраничных макетах, но вы можете использовать Roll.js и для других целей.

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

  • Количество шагов прокрутки страницы (если возможно)
  • % прокрученной области от высоты всей страницы
  • Текущую позицию на странице
  • Общую высоту области просмотра в зависимости от размера устройства

Также это работает и ссылками на странице, которые позволяют посетителю перемещаться вверх-вниз по странице. Описанные возможности есть и у многих других библиотек. Что делает Roll.js такой особенной?

Частично — это синтаксис, но большое преимущество — это общий размер библиотеки при минимизации - 8 КБ. Это чертовски мало для такой библиотеки прокрутки с такими широкими возможностями!

Используем Roll.js в HTML canvas

Вы можете увидеть, как это работает, на демонстрационной странице. Также здесь вы сможете скачать исходный код Roll.js, чтобы разобраться в этих демонстрациях самостоятельно. Любой из файлов демонстрационных примеров и файлов библиотеки можно загрузить с GitHub. С ними очень легко работать.

Если у вас есть какие-либо вопросы, предложения или вы хотите поблагодарить за замечательную библиотеку, вы можете отправить сообщение создателю @williamngan.

Оригинал статьи: Build Your Own Page Scrolling Effects With Roll.js

Перевод: Земсков Матвей

Прочитано 6038 раз
Мои услуги

Предлагаю следующие услуги:

  • Верстка шаблона сайта из дизайн-макета для CMS «1С-Битрикс Управление сайтом» и CMS “Joomla”
  • Создание форм различной сложности (обратная связь, анкеты и тп) для указанных CMS
  • Настройка и кастомизация компонентов и модулей для указанных CMS
  • Доработка модулей и компонентов для указанных CMS, добавление нестандартного функционала
  • Разработка лендингов (landing-pages)

По все вопросам обращайтесь через форму обратной связи

Скачать

Предлагаю вашему вниманию:

Наверх