Rellax.js - Bezpłatne funkcje paralaksy wykorzystujące JavaScript Vanilla

Przewijanie paralaksy wygląda niewiarygodnie, gdy jest dobrze wykonany Nie jest to funkcja, którą chcesz mieć na każdej stronie, ale dla stron kreatywnych i stron docelowych, elementów paralaksy szybko przyciągnij uwagę.

Istnieje mnóstwo darmowych bibliotek JavaScript animowane efekty przewijania ale wielu jest nadęty lub po prostu zbyt skomplikowany dla niektórych ludzi.

Dlatego polecam Rellax.js dla twoich potrzeb paralaksy. To darmowa wtyczka open source zbudowana na waniliowym JavaScript, więc to nie ma żadnych zależności.

Domyślnie to wymaga tylko prostego wywołania funkcji przypisać klasę paralaksy do elementów strony. Następnie, podczas przewijania, te elementy zostań naprawiony i poruszaj się wraz z punktem widzenia użytkownika.

Możesz dostosować te elementy, aby były bliżej, dalej lub za elementami strony. To tworzy złudzenie głębi na stronie i wszystko działa poprzez jedną prostą bibliotekę JavaScript.

Wszystkie kody źródłowe Rellax są dostępne za darmo na GitHub, jeśli chcesz pobrać kopię.

Cała konfiguracja używa pojedynczej funkcji JS kierowanie na .relaks klasa jak ta:

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

Zwróć uwagę, że możesz używać bardzo dużo dowolna klasa, którą chcesz, ale przykład demo używa .relaks dla uproszczenia.

Stąd po prostu owinąć elementy paralaksy wewnątrz div z .relaks klasa i ustaw atrybut prędkości. To działa przez szybkość transmisji danych atrybut niestandardowy, który przyjmuje wartości od -10 do +10.

Oto przykładowy urywek z HTML na stronie demonstracyjnej:

 
 Jestem wyjątkowo powolny i gładki 
 

Możesz również elementy środkowe na stronie i dostosuj pozycje elementów przez CSS.

Rellax nie mówi ci, jak ustrukturyzować stronę lub jak zdefiniować elementy CSS na swojej stronie. Wszystko co robi to stworzyć naturalny efekt przewijania paralaksy z czystym JavaScriptem. To, jak tego używasz, zależy wyłącznie od ciebie.

Aby zobaczyć demo na żywo, zajrzyj na główną stronę lub przejrzyj repozytorium GitHub. Obejmuje to pewną dokumentację wraz z linkami do witryn internetowych korzystających z Rellax.js.

A co najważniejsze, zespół stale chce przyjmować żądania ściągania, więc jeśli zauważysz jakieś problemy lub masz sugestie dotyczące funkcji, po prostu wyślij szybką wiadomość do zespołu.