Rellax.js - Безплатни Паралакс функции, използващи JavaScript Vanilla

Свиване с паралакс изглежда невероятно, когато е направено правилно. Това не е функция, която искате да използвате на всеки уебсайт, а за творчески сайтове и целеви страници, елементи на паралакс вземете внимателно бързо.

Има тонове свободни JavaScript библиотеки за анимирани ефекти на превъртане но много от тях са подути или твърде сложни за някои хора.

Затова препоръчвам Rellax.js за вашите нужди от паралакс. Това е безплатен плъгин с отворен код, изграден върху ванилия JavaScript, така че няма никакви зависимости.

По подразбиране той изисква само обикновени функции да присвоите паралаксния клас на елементите на страницата. След това, докато превъртате, тези елементи останете неподвижни и се движите заедно с гледната точка на потребителя.

Можете да персонализирате тези елементи, за да изглеждат по-близо, по-далеч или зад елементите на страницата. Това създава илюзия за дълбочина на страницата и всичко работи чрез една проста библиотека на JavaScript.

Всички изходни кодове на Rellax са достъпни безплатно на GitHub, ако искате да изтеглите копие.

Цялата настройка използва една JS функция насочени към .rellax такъв клас:

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

Забележете, че можете да използвате доста всеки клас, който искате, но примерната демонстрация използва .rellax заради простотата.

Оттук, вие просто увийте паралаксните си елементи вътре в div с .rellax клас и задайте атрибута на скоростта. Това работи чрез данни rellax скорост персонализиран атрибут, който приема стойности от -10 до +10.

Ето едно примерен фрагмент от HTML кода на демонстрационната страница:

 
 Много съм бавен и плавен 
 

Можете също централни елементи на страницата и персонализирате позициите на елементите чрез CSS.

Rellax не ви казва как да структурирате страницата или как да дефинирате CSS елементи на вашата страница. Всичко, което прави, е създаване на естествен паралакс скролиращ ефект с чист JavaScript. Как ще използвате това зависи изцяло от вас.

За да видите a демо на живо, погледнете главния сайт или прегледайте репо GitHub. Това включва някои документи, както и връзки към живи уебсайтове, използващи Rellax.js.

И най-хубавото е, че екипът е постоянно готов да приема заявки за изтегляне, така че ако забележите някакви проблеми или имате предложения за функции, просто изпратете бързо съобщение до екипа.