Jak utworzyć warstwowy efekt paralaksy na swojej stronie

Sep 11, 2025
Jak
layered parallax effect
(Kredyt obrazu: www.beargryls.com)

Ruch paralaksy, koncepcja ruchomych warstw w różnych prędkościach, była używana przez lata w animacji. Oficjalna strona internetowa Bear Grylls (jeden z naszych ulubionych Swialunki paralaksy. ), podejmuje wpływ w nowe i interesujące kierunki. Góry tła skalują w pozycji, podczas gdy zanikanie, aby stały się w pełni nieprzezroczyste, a w tle strony, tekst "Przygoda" wznosi się na miejsce za góry, gdy zniknie.

Aby uzyskać bardziej inspirujące efekty ruchu, sprawdź nasz przewodnik po najlepszych Animacje CSS i jak je kodować .

Projektowanie witryny Bear Grylls jest dziełem Agencji Marketingowej Wielkiej Brytanii Placówka oraz z widownią docelową od 16 do 55 lat, a ponad 7 milionów zwolenników na całym świecie, mieli poważne zadanie na rękach.

"Główną cechą strony była strona główna; chcieliśmy odwiedzających dosłownie wskoczyć do ekranu i dołączyć do niedźwiedzia na jego przygodach", wyjaśnij współzałożyciela Chris Wilcock i Dyrektor Kreatywny Dan Williams. "Aby to osiągnąć, wykorzystaliśmy pewne sprytne przejścia, w połączeniu z edytowanymi filmami, dramatycznymi obrazami i ogólnym językiem na stronie."

Zobacz stronę w akcji www.beargrylls.com. . W tym artykule wyjaśnimy, jak odtworzyć wpływ na własne strony. Zacząć od Pobieranie plików samouczka .

01. Utwórz efekt skalowania

Struktura umożliwia wszystkie treści animujące do pracy jest stosunkowo proste. Owijarka trzyma wszystko i ukrywa zawartość przepełnienia. Następnie istnieją zasadniczo trzy warstwy tagów div na górze.

02. Rozpocznij CSS

Aby projektować, obraz gradientowy tło zostanie dodany do ciała i ustawiony na wypełnienie rozmiaru ekranu. Owijarka posiada wszystkie warstwy, a przepełnienie treści jest ukryty, aby można było zastosować efekty skalowania. 

 Ciało {
Marża: 0;
Wyściółka: 0;
Wysokość: 100%;
Tło: URL (IMG / BG.JPG)
centrum środkowe;
Rozmiar tła: okładka;
}
.wrapper {
Szerokość: 100vw;
Wysokość: 100VH;
Pozycja: krewna;
Przepełnienie: Ukryte;
}

03. Ustaw każdą warstwę

Następny kod zapewnia, że ​​każda warstwa jest usytuowana absolutnie, jeden na drugim, wewnątrz opakowania. Rozmiar tego wypełnia szerokość i wysokość rzutni, aby obrazy wypełniają ekran. 

 .spos {
pozycja: absolutna;
Top: 0;
Po lewej: 0;
Szerokość: 100vw;
Wysokość: 100VH;
}

04. Dodaj tekst

Klasa tekstowa naprawdę dodaje odpowiedni obraz i ustawia swoją pozycję startową przed ożywieniem na miejscu za pomocą przenieść Klawiatury, które zostaną dodane w ostatnim kroku. 

 .Text {
Tło: URL (IMG / Text.png)
centrum środkowe;
Rozmiar tła: okładka;
Transform: Translate3d (0, 30px, 0);
nieprzezroczystość: 0;
Animacja: MoveUp 1.8s Ease-Out;
Animacja-tryb wypełnienia: do przodu;
}

05. Animuj pierwszą górę

Pierwsza góra jest tajemna z dala od ekranu, a to otrzyma małe skalowanie, które będzie animowane. Krycie wszystkich warstw jest również niska, dzięki czemu pojawiają się na miejscu. 

 .Mountain1 {
Tło: URL (IMG / Mountain1.png)
centrum środkowe;
Rozmiar tła: okładka;
przekształcić: skala3d (1,1, 1,1, 1.1);
nieprzezroczystość: 0,2;
Animacja: SCALER 1S OUT-OUT;
Animacja-tryb wypełnienia: do przodu;
}

06. Animuj na pierwszym planie

Góra na pierwszym planie jest prawie identyczna z drugą górą - po prostu robi znacznie więcej skali na miejscu. Oba góry dzielą kluczowe "skalera" kluczowe dla ich animacji. 

 .Mountain2 {
Tło: URL (IMG / Mountain2.png)
centrum środkowe;
Rozmiar tła: okładka;
przekształcić: skala3d (1,3, 1,3, 1,3);
nieprzezroczystość: 0,1;
Animacja: Scaler 1,2s Ease-Out-Out;
Animacja-tryb wypełnienia: do przodu;
}

07. Dodaj animację kluczową

Teraz utworzone są klatki kluczowe, które to określa. W stanie końcowym ruchu ten stan końcowy odbędzie się na miejscu. Tekst został przeniesiony, a góry są skalowane, aby zmieścić się do projektu. 

 @keyframes MoveUp {
100% {
Transform: Translate3d (0, 0, 0);
nieprzezroczystość: 1;
}
}

@keyframes skaler {
100% {
przekształcić: skala3d (1, 1, 1);
nieprzezroczystość: 1;
}
}

generate CSS

Podnieś bilet, aby wygenerować CSS teraz dla dużej zniżki (Kredyt obrazu: przyszłość)

Ten artykuł został pierwotnie opublikowany w wydaniu 289 z Projektant stron internetowych - już w sprzedaży . Subskrybuj tutaj .

Czytaj więcej:

  • Jak dodać animację do SVG z CSS
  • DOS i zakazy dla zachwycających animacji internetowych
  • Jak zaprojektować z kształtami CSS: wprowadzenie

Jak - Najpopularniejsze artykuły

Czy twój Apple Icloud Storage jest pełny? Oto jak uwolnić przestrzeń

Jak Sep 11, 2025

(Kredyt obrazu: Apple) Serwis ICloud Apple jest jednym z Najlepsza pamięć chmur. Produkty wokół - ..

Utwórz starego efektu anaglifów

Jak Sep 11, 2025

(Kredyt obrazu: Knight Travis) Efekt anaglifów jest właściwą nazwą klasycznego stylu 3D, w którym musisz nosić..

Utwórz efekty kolażu w przeglądarce CSS

Jak Sep 11, 2025

Jeśli kiedykolwiek życzyłeś, możesz odpowiedzieć efekty tradycyjnej Maker kolaż w Twoim Układy str..

Designer powinowactwo: Jak używać ograniczeń

Jak Sep 11, 2025

Projektant powinowactwa jest popularne Sztuka wektorowa narzędzie. Jak również wersje Mac i Windows,..

10 Niesamowite rzeczy, które możesz zrobić z warstwami

Jak Sep 11, 2025

Warstwy są tym, co umożliwia budowanie projektu od wczesnych fundamentów do wykończenia. Trudno w to teraz uwierzyć, ale nie..

Designer powinowactwo: Jak używać sieci

Jak Sep 11, 2025

Projektant powinowactwa to zestaw narzędzi do edycji wektorowych dostępnych dla komputerów Mac i Windows, a także na ..

MasterClass Anatomia: Doskonalić swoje figury

Jak Sep 11, 2025

W tej MasterClass ujawnię podstawowe kroki, które musisz podążać, aby się nauczyć Jak rysować liczby . Zac..

Jak tworzyć niesamowite efekty z kształtami CSS

Jak Sep 11, 2025

Deweloperzy Frontend mają tendencję do myślenia w prostokątach; Prostokąty wewnątrz prostokątów wewnątrz prostokątów w..

Kategorie