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

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

Четверг, 27 февраля 2020 21:12

Rellax.js - параллакс-эффекты на основе vanilla JavaScript

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

Если параллакс-скроллинг сделан правильно, он выглядит завораживающе. Конечно, этот эффект не подходит для использования на любом сайте, но с помощью него вы можете быстро привлечь внимание к страницам креативного сайта и посадочным страницам (лендингам).

Существует множество бесплатных библиотек для создания анимированного эффекта скроллинга, но многие их них сильно «раздуты» или сложны в использовании. Поэтому автор статьи рекомендует библиотеку Rellax.js для создания параллакс-эффектов. Это бесплатный плагин с открытым исходным кодом, созданный на чистом («ванильном») JavaScript. Таким образом он не имеет никаких зависимостей от других библиотек.

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

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

Если вы хотите получить Rellax.js, то зайдите на страницу на GitHub. Весь исходный код библиотеки доступен бесплатно.

Использование Rellax.js заключается в вызове всего одной функцию JS, с указанием CSS-класса .rellax в качестве аргумента. Например:

JavaScript

var rellax = new Rellax('.rellax');

Обращаю внимание, что вы можете использовать любой CSS-класс, но в примерах для простоты восприятия используется класс .rellax.

Теперь осталось только «обернуть» ваши параллакс-элементы в div с классом .rellax и указать значение атрибута скорости. Им является пользовательский атрибут data-rellax-speed, который может иметь значения от -10 до +10.

Вот небольшой пример HTML-кода, который используется на демо-странице.

HTML

<div class="rellax" data-rellax-speed="-7">
  I'm extra slow and smooth
</div>

Вы также можете центрировать элементы на странице и настраивать позиционирование элементов с помощью CSS.

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

Rellax.js - параллакс-эффекты на основе vanilla JavaScript

Чтобы посмотреть демо-страницу, ознакомьтесь с официальный сайтом или загляните в репозиторий на GitHub. На нем есть необходимая документация, а также ссылки на реальные сайты, использующие Rellax.js. И что самое приятное, команда разработчиков библиотеки постоянно принимает обратную связь, поэтому, если вы заметите какие-либо проблемы или у вас есть предложения по улучшению функционала, просто сообщите им об этом.

Демо-страница

Оригинал статьи: Rellax.js – Free Parallax Features Using Vanilla JavaScript

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

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

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

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

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

Скачать

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

Наверх