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

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

Немного о веб-технологиях

Мой блог содержит заметки о различных веб-технологиях, как клиентских, так и серверных. Здесь будут раскрыты вопросы html-верстки, программирования на javaScript и jQuery,разработки на PHP. Не останутся без внимания популярные системы управления сайтом «1С-Битрикс», Joomla и другие. О работе с ними, я также буду писать.

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

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

Надеюсь информация будет полезна для посетителей.

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

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

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

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

Существует множество бесплатных библиотек для создания анимированного эффекта скроллинга, но многие их них сильно «раздуты» или сложны в использовании. Поэтому автор статьи рекомендует библиотеку 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

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

Прочитано 153 раз
Другие материалы в этой категории:
8 бесплатных JS-плагинов для обрезки изображений

Добавить комментарий


Свежие заметки
Последние комментарии
  • Ошибка при настройке push and pull сервера в Битрикс ВМ
    • Матвей 29.03.2020 09:57
      Добрый день! На тот момент не удалось. Сейчас мне неизвестно, так как после этого наш клиент больше не ...
       
    • Анатолий 23.03.2020 15:02
      Добрый день! А как в итоге получилось установить push-server или нет? Если получилось объясните как.
       
    • Матвей 20.01.2020 23:04
      Пожалуйста, Roman.
       
    • Roman 15.01.2020 15:37
      Спасибо добрый человек, очень помог. Возникла точно такая-же ошибка, после точно таких-же действий.
  • Создание почтового события с помощью API в Битрикс
    • irmaseo.ru 02.03.2020 20:00
      Очень полезная информация
Наверх