Rellax.js - безкоштовні параметри паралакса з використанням Vanilla JavaScript
Прокрутка паралакса виглядає неймовірно, коли все зроблено правильно. На кожному веб-сайті не потрібна функція, а для творчих сайтів і цільових сторінок, елементів паралакса приверніть увагу швидко.
Є багато вільних бібліотек JavaScript для анімовані ефекти прокрутки але багато хто роздутий або занадто складний для деяких людей.
Ось чому я рекомендую Rellax.js для потреб вашого паралакса. Це безкоштовний плагін з відкритим вихідним кодом, побудований на ванільному JavaScript, тому він не має залежностей.
За замовчуванням це вимагає лише простий виклик функції призначити клас паралаксу елементам сторінки. Потім, як ви прокручуєте, ці елементи залишайтеся фіксованими і рухатися разом з точки зору користувача.
Ви можете налаштувати ці елементи, щоб вони виглядали ближче, далі або за елементами сторінки. Це створює ілюзія глибини на сторінці, і все працює через одну просту бібліотеку JavaScript.
Всі вихідні коди Rellax доступні безкоштовно на GitHub, якщо ви хочете завантажити копію.
Вся установка використовує одну функцію JS націлювання на .rellax клас:
var rellax = new Rellax ('. rellax'); Зверніть увагу, що ви можете використовувати досить багато будь-який клас, який ви хочете, але приклад демо використовує .rellax заради простоти.
Звідси ви просто оберніть елементи паралакса всередині div з .rellax клас і встановити атрибут швидкості. Це працює через data-rellax-speed користувальницький атрибут, який приймає значення від -10 до +10.
Ось такий приклад фрагменту з HTML на демонстраційній сторінці:
Я дуже повільний і плавний
Ви також можете елементи центру на сторінці та налаштувати позиції елементів через CSS.
Rellax не розповідає, як структурувати сторінку або як визначати елементи CSS на вашій сторінці. Все це робить створити природний ефект прокрутки паралакса з чистим JavaScript. Як ви використовуєте це повністю залежить від вас.
Щоб побачити a демо, загляньте на головний сайт або перегляньте репо GitHub. Це включає деякі документи, а також посилання на живі веб-сайти за допомогою Rellax.js.
А краще за все, команда постійно бажає приймати запити, тому, якщо ви помітили будь-які проблеми або отримали пропозиції щодо функцій, просто надішліть команду швидко.
