10 fragmentów CSS i JavaScript do tworzenia efektu przewijania paralaksy

Istnieje wiele nieporozumień dotyczących projektowania paralaksy i tego, jak działa w sieci. Ogólnie rzecz biorąc, projekt paralaksy wykorzystuje ruch, aby stworzyć iluzję głębi na stronie.

Może to dotyczyć zmian w tle lub elementów o częściowo ustalonej pozycji, które poruszają się wraz z przewijaniem przez użytkownika. Omówiliśmy wiele przykładów ze stron internetowych, ale nie omówiliśmy szczegółowo stosowanych technik.

Do tej kolekcji wybrałem moje ulubione fragmenty kodu CSS i JavaScript do tworzenia układów paralaksy. Wszystkie przykłady oferują darmowy kod źródłowy, więc możesz bawić się fragmentami, a nawet używać ich we własnych projektach.

1. Wielki Upadek CJ Gammona

Ten przykład paralaksy jest jednym z najbardziej unikalnych interfejsów, jakie kiedykolwiek znalazłem. Używa niestandardowego skryptu do tworzenia ikonki wodospadu, która wydaje się płynąć w nieskończoność w dół strony. Został zbudowany na elementach kanwy kontrolowanych przez JavaScript, więc jest to dość techniczna konfiguracja.

W większości jest to świadectwo tego, co jest możliwe w nowoczesnym tworzeniu stron internetowych. Poznanie elementu canvas daje Ci dużą kontrolę nad projektem.

Zobacz pióro The Great Fall autorstwa CJ Gammona

2. Paralaksa przewijania CSS autorstwa Sebastiana Schepisa

Oto bardziej praktyczny efekt paralaksy ze stałym tłem i większymi stronami na górze. Podczas przewijania każda sekcja strony pojawia się nad tłem. Tworzy to iluzję głębi i jest jednym z kluczowych elementów doskonałego projektu paralaksy.

Deweloper Sebastian Schepis użył tylko CSS dla tej strony i jest to dość prosta koncepcja. Myślę, że każdy mógłby to z łatwością sklonować, nie wspominając o projekcie tła, który mógłby zostać znacznie ulepszony.

Zobacz efekt paralaksy przewijania pióra CSS autorstwa Sebastiana Schepisa

3. Prosta paralaksa obrazkowa autorstwa Renana Breno

Często można znaleźć projekty paralaksy w połączeniu z dużymi pełnoekranowymi obrazami tła. Są one zbyt powszechne w witrynach firmowych i start-upach, gdzie zwykle w tle mają pewną paralaksy „szybkość przewijania”.

Różnica nie polega na tym, jak szybko przewijasz stronę lub jak duże jest miejsce na obraz. Zamiast tego zobaczysz, jak szybko obraz przesuwa się przez tło strony podczas przewijania. To subtelny efekt paralaksy, ale ten układ jest doskonałym szablonem, aby zobaczyć różne szybkości animacji w akcji.

Zobacz pióro Simple Image Tag Parallax autorstwa Renan Breno

4. Paralaksa i stałe tła obrazu

Stałe tło obrazu działa dobrze, aby podzielić strony i równomiernie podzielić sekcje treści. Podczas przewijania może się wydawać, że poszczególne sekcje strony są wyższe niż obrazy tła. Wszystko to zostało zaprojektowane, aby tchnąć życie w efekt paralaksy podczas przewijania.

Nie użyłbym tego dokładnego układu, ponieważ obszary zawartości wydają się nieco cienkie. Ale jeśli podoba Ci się ten styl, polecam interpunkcję każdej sekcji strony innym obrazem odpowiednim dla Twojej witryny.

Zobacz pióro #Maincode Hackdays autorstwa chaobu

5. Paralaksa CSS autorstwa Paulo Cunha

Ten przykład paralaksy jest unikalnym przykładem działania efektów paralaksy. Cała zawartość strony znajduje się pod dużym obrazem bohatera, który znika pod zawartością przewijania. Wykorzystuje to również stałą pozycję obrazu, aby wyglądała tak, jakby strona poruszała się po obrazie, a nie obraz pozostawał nieruchomy.

Możesz użyć tego samego efektu z długim układem przewijania i będzie miał podobny styl projektowania. To działałoby najlepiej w przypadku pojedynczych postów na blogu z dużymi polecanymi obrazami lub stron docelowych, które wykorzystują dużych bohaterów, aby przyciągnąć uwagę.

Zobacz paralaksę pióra CSS autorstwa Paulo Cunha

6. Projekt paralaksy autorstwa Katie Rogers

Oto ciekawy projekt paralaksy dla przykładowej strony ślubnej. Ma projekt podzielonej strony, w którym obrazy oddzielają wiele różnych obszarów treści za pomocą stałego przewijania paralaksy. Wszystko działa w CSS, co jest miłym akcentem, a wszystkie obrazy tła pozostają stałe podczas przesuwania się w dół strony.

Ten efekt działa, ponieważ obszary zawartości mają duże cienie na tle tła. Naturalnie tworzy to iluzję głębi poprzez nadanie stronie teoretycznego źródła światła i hierarchii — bardzo fajny pomysł na układ jednostronicowy.

Zobacz projekt pióra paralaksy autorstwa Katie Rogers

7. Przewijanie paralaksy obrazu tła autorstwa Richa Howella

Wcześniej wspomniałem, jak prędkość przewijania może się różnić w zależności od szybkości zmiany pozycji tła. Ten przykład jest idealnym porównaniem, aby zobaczyć, jak to działa w akcji.

Zauważ, że będziesz musiał użyć paska przewijania, aby zobaczyć efekty tego przykładu. Próbowałem z kółkiem myszy i nie zauważyłem żadnej różnicy, ale zauważysz zmiany prędkości w kolumnach, gdy poruszasz paskiem przewijania.

Żadna z tych prędkości nie jest błędnym lub niedokładnym przedstawieniem projektu paralaksy. To po prostu różne metody tworzenia ruchu na stronie, a ten mały przykład to świetny sposób na wizualizację wielu opcji.

Zobacz paralaksę obrazu tła przewijanego piórem autorstwa Richa Howella

8. Gwiaździste tło paralaksy autorstwa Saransha Sinha

Chociaż ten efekt nie odnosi się do przewijania, bezpośrednio odnosi się do projektowania paralaksy. Używa czystego CSS do tworzenia animacji gwiazdy paralaksy w tle strony. Możesz dodać tekst, a nawet obszar treści na stronie, ale gwiazdki natychmiast tworzą głębię na pierwszy rzut oka.

Animacja przebiega przez CSS, ale ten fragment korzysta z Sass i Compass, więc pomocne byłoby zrozumienie przed wprowadzeniem zmian.

Zobacz tło Pen Parallax Star w CSS autorstwa Saransh Sinha

9. Płótno Parallax Skyline autorstwa Jacka Rugile

Czasami projekty paralaksy są również ukierunkowane na ruch myszy wraz z funkcjami przewijania. Ten projekt na płótnie tworzy niekończący się efekt panoramy, który reaguje na ruch myszy na stronie. Gdy zmieniasz położenie myszy, zmienia się kąt widzenia. Ale animacja pozostaje taka sama i możesz zobaczyć tę panoramę poruszającą się z wyraźną hierarchią wizualną.

Oczywiście wymaga to JavaScript do animacji, ponieważ jest to dość złożony pomysł. Ale nie jest to również coś, co znajdziesz w wielu witrynach, więc nie jest to również coś, co możesz skopiować do swojej witryny. Ale jako koncepcja paralaksy, ta jest naprawdę interesująca.

Zobacz Pen Canvas Parallax Skyline autorstwa Jacka Rugile

10. Filtr potłuczonego szkła autorstwa Bajjy Xilo

Widziałem już ten efekt na stronach internetowych, tworząc bardzo osobliwy projekt. Filtr potłuczonego szkła daje złudzenie, że obraz tła jest podzielony na wiele różnych części. Wygląda prawie tak, jakby obraz znajdował się na tafli szkła i roztrzaskał się, przełamując obraz i przekrzywiając obraz.

Możesz odtworzyć ten efekt za pomocą czystego CSS i jest to jeden z tych fajnych efektów, który jest fajny, ale może nie mieć żadnego praktycznego, rzeczywistego zastosowania poza fantazyjnymi projektami. Mimo to jest to imponujący przykład głębi paralaksy i ruchu podczas przewijania.

Zobacz filtr css Pen BrokenGlass autorstwa Bajjy Xilo