Tło i wprowadzenie
Jeśli przeglądasz dowolną współczesną witrynę internetową na komputerach lub telefonach komórkowych, możesz doświadczyć, że podczas przewijania witryny w dół / w górę wydaje się, że cały ekran przesuwa się w kierunku przewijania. Jeśli jest to efekt w tle, informacje na pierwszym planie również zmieniają się podczas przewijania. Efekt ten można krótko opisać jako przewijanie paralaksy.
Przewijanie
Zrozummy, co to znaczy, przewijając. Podczas przeglądania strony internetowej czynność przeglądania strony internetowej w dowolnym kierunku (w górę, w dół, w lewo i w prawo) jest nazywana przewijaniem.
Zwykle, jeśli jesteś użytkownikiem komputera stacjonarnego, ta czynność jest wykonywana za pomocą kółka przewijania myszy.
Historia
Spójrzmy na słowo - Przewiń. W dawnych czasach, aby wysłać wiadomość do innych osób znajdujących się w dużej odległości, używano odręcznych zwojów. Te zwoje wyglądały tak, jak pokazano poniżej -
Wyobraź sobie akcję osoby trzymającej zwój. Aby przeczytać treść w całości, osoba musiałaby ją „przewinąć” i przewinąć dalej. Wykorzystanie tych zwojów służyło również do przechowywania zapisów tekstu lub decyzji. Z biegiem czasu użycie zwoju wzrosło, ponieważ był on sporządzany z różnych materiałów piśmienniczych, takich jak - papirus, pergamin i papier.
Wraz z rozwojem komputerów możliwe stało się przetwarzanie i przechowywanie bardzo dużych dokumentów, tabel i obrazów. Czasami danych było tak dużo, że rozmiar ekranu był po prostu niewystarczający, aby przedstawić dane użytkownikowi. Gdy dane do wyświetlenia były większe niż rozmiar okna lub obszaru wyświetlania, dane pozostałyby ukryte. Wymagało to podejścia polegającego na rozszerzeniu obszaru ekranu.
Niektóre opcje osiągnięcia rozszerzenia ekranu są wymienione poniżej -
- Aby zwiększyć rozmiar ekranu
- Aby zmniejszyć rozmiar danych
- Aby skorzystać z przewijania
Ten mechanizm przewijania jest ważniejszy dla osób zajmujących się projektowaniem grafiki i edycją zdjęć.
Początek przewijania paralaksy
Przyjrzyjmy się historii przewijania paralaksy. Najpierw zrozumiemy, co oznacza słowo paralaksa. Słowo paralaksa pochodzi od greckiego słowaπαράλλαξις (paralaksja), co oznacza przemianę.
Jeśli patrzymy na obiekt pod kątem, obiekt ten pojawi się w określony sposób. Ale jeśli przesuwasz ten sam obiekt z różnych pozycji, będzie widoczny ruch obiektów. Zjawisko to nazywane jest paralaksą.
Teraz, gdy zrozumieliśmy pochodzenie i tło paralaksy, poznajmy historię i koncepcję przewijania paralaksy w projektowaniu stron internetowych.
Definicja
Według Wikipedii - Parallax scrolling to technika w grafice komputerowej, w której obrazy tła przesuwają się wolniej przed kamerą niż obrazy pierwszego planu, tworząc iluzję głębi w scenie 2D i zwiększając poczucie zanurzenia w wirtualnym doświadczeniu.
Przewijanie paralaksy było stosowane we wczesnych dniach animacji. Wiele studiów animacji (takich jak Disney) wykorzystywało kamery wielopłaszczyznowe, aby uzyskać efekt paralaksy.
Wraz z ewolucją technologii grafiki komputerowej wraz z najnowocześniejszymi strukturami, takimi jak JavaScript, projektanci stron internetowych i programiści mogą teraz tworzyć witryny z bogatym doświadczeniem. Chociaż przewijanie paralaksy rozpoczęło się od kilku warstw, zostało przeniesione na wyższy poziom za pomocą pasków przewijania w komputerach. Technika pozostała ta sama, ale dzięki zastosowaniu jej do przewijania powstało wyjątkowe doświadczenie.
Przykłady
Przewijanie paralaksy jest szeroko stosowane w nowoczesnych witrynach internetowych. Ponieważ przewijanie paralaksy można zaimplementować w telefonach komórkowych i witrynach stacjonarnych za jednym razem, popularność takich witryn gwałtownie wzrosła w ostatnich latach.
Poniżej podano kilka przykładów witryn internetowych, które wykorzystują przewijanie paralaksy -
Bear Grylls
W miarę postępu animacji będziesz mógł zobaczyć, jak zawartość witryny staje się interaktywna. W miarę przewijania do przodu ujawni się coraz więcej informacji.
Spraw, aby Twoje pieniądze miały znaczenie
Aby przybliżyć czytelnikowi korzyści płynące z unii kredytowej, ta strona przedstawia fabułę. Podczas przewijania do przodu informacje są ujawniane w wyjątkowy sposób.
Infografika InfoQuest
Droga pracownika w celu znalezienia krytycznych informacji w miejscu pracy jest przedstawiona za pomocą funkcji przewijania.
GitHub 404
To trochę różni się od zwykłego doświadczenia paralaksy, obiekt u góry ekranu porusza się, gdy najedziesz na niego wskaźnikiem myszy.
Zastosowania przewijania paralaksy
Do tej pory z definicji i tła powinno jasno wynikać, że przewijanie paralaksy jest przydatne w wielu różnych mediach cyfrowych. Niektóre aplikacje są przewijane paralaksą poniżej -
Design gry
Przewijanie paralaksy jest szeroko stosowane w projektowaniu gier. Postać musi poruszać się względem tła, a dzięki kontroli gracza za pomocą myszy i klawiatury całe doświadczenie musi się zmienić. Projekt gry jest bardzo prymitywnym, ale modnym sposobem wykorzystania przewijania paralaksy.
Strony internetowe
Aby użytkownik był przywiązany do witryny, ważne jest pewne dynamiczne i odmienne doświadczenie. Jak można zauważyć na przykładach omawianych powyżej witryn internetowych, przewijanie paralaksy zwiększa zawartość treści, ponieważ jest reprezentowana w sposób interaktywny.
W tym rozdziale omówiono koncepcje projektowania stron internetowych i zalety korzystania z przewijania paralaksy w projektowaniu stron internetowych.
Tło projektowanie stron internetowych
Od początku XX wieku media papierowe toczyły zaciekłą konkurencję ze względu na media cyfrowe. Media cyfrowe obejmują to, co widzimy w Internecie, a tym samym pojawiające się czasopisma pokrewne.
Biuletyny, które otrzymujesz w ramach cotygodniowych / miesięcznych subskrypcji, są również zawarte w mediach cyfrowych. Przede wszystkim media cyfrowe w dużym stopniu zależą od urządzeń mobilnych i stacjonarnych. Oglądanie treści na urządzeniach mobilnych (przenośnych) i komputerowych ma znaczenie. Sposób, w jaki treść jest wyświetlana na każdym z urządzeń, odgrywa rolę określonego stylu projektowania treści.
Ten styl projektowania jest określany jako Web Designing. Z punktu widzenia projektowania lub kodowania, gdy projektant stron internetowych chce zbudować stronę internetową, bierze pod uwagę również urządzenia mobilne.
Według Wikipedii Web design obejmuje wiele różnych umiejętności i dyscyplin w zakresie tworzenia i utrzymywania stron internetowych. Jedną z takich umiejętności jest projektowanie wrażeń dla użytkowników. Projektowanie stron internetowych zapewnia takie doświadczenie i zapewnia zorganizowany sposób aranżacji zawartości strony i zapewnia różne style.
Projektowanie stron internetowych obejmuje - projekt interfejsu, projekt graficzny oraz wykorzystanie określonych standardów do pisania kodu. Ta praca może być wykonywana przez jedną osobę lub przez zespół ludzi.
Na rynku dostępnych jest wiele narzędzi ułatwiających tę pracę, jednak tworzenie wyglądu strony internetowej zależy od umiejętności twórczych.
Nowoczesne projektowanie stron internetowych
Wraz z ewolucją technologii następuje eksplozja wiedzy. Internet stał się rzeczą i podniósł jakość naszego życia. W każdym momencie przeciętny internauta przetwarza coraz więcej informacji. Informacje te mogą mieć postać strony internetowej na komputerze stacjonarnym lub z urządzenia przenośnego; tablet lub telefon komórkowy.
Chociaż tak wiele informacji próbuje przyciągnąć uwagę użytkownika, oczywiste jest, że jako osoba projektująca witrynę internetową, there are only 3 seconds allocated to pass the message across.
Jak sobie z tym radzić? Przekazanie wiadomości jest bardziej niż ważne, ponieważ jest ona źródłem każdego projektu internetowego. Chcesz zbudować stronę internetową, która się komunikuje, jednocześnie musi przyciągać i zmuszać użytkownika do trzymania się treści. To rzeczywiście trudne zadanie.
Biorąc pod uwagę olbrzymi zakres prac nad dowolną treścią internetową, coraz więcej osób wkracza w świat projektowania stron internetowych. Miasto mówi o kreatywnym projektancie stron internetowych dzięki jego niesamowitemu talentowi do tworzenia dobrych doświadczeń użytkownika. Projektant stron internetowych może obecnie podjąć pracę w firmie marketingowej / reklamowej lub samemu zacząć zajmować się projektowaniem stron internetowych.
Aesthetic appeal is the key for a given content on web. Oznacza to, że projektant stron internetowych musi być świadomy zasad i podstaw projektowania, kolorów, odstępów itp. Coraz więcej użytkowników codziennie widzi wysokiej jakości treści internetowe. Oczywiste jest, że porównamy aktualną stronę internetową lub witrynę internetową z tą, która była odwiedzana kilka godzin lub kilka minut wstecz. Porządkowanie treści w połączeniu z dobrą grafiką i kolorami sprawiło, że wiele samodzielnych banerów / stron stało się popularną rzeczą w Internecie.
Przykład
Weźmy przykład prostej grafiki. W internecie jest wiele grafik zwanych memami. Są prosteGraphics Interchange Format (GIF)obrazy z tekstem osadzonym wewnątrz grafiki. Te memy krążą po Internecie w oparciu o niedawne wydarzenie w jakiejś części świata. Jeśli spojrzymy na ten przykład, jedyną atrakcją, jaką mają, jest grafika i jakiś odpowiedni lub nieistotny tekst.
Mimo to zyskał tak dużą popularność, że można pomyśleć o niesamowitych możliwościach w Internecie.
Tak więc, aby projekt internetowy był skuteczny, zarówno kreatywność, jak i metoda przekazywania wiadomości odgrywają ważną rolę.
It is important point to note that a successful web page is combination of Web Design and Web Development. Zgodnie z obecnym trendem rynkowym, obok projektanta stron internetowych, programista jest niezbędny w zespole. Projektant stron internetowych zawsze będzie szukał inspiracji i wykorzystywał swoją kreatywność do tworzenia grafik i odpowiednich schematów kolorów. Podczas gdy programista stron internetowych wykorzysta swoje umiejętności kodowania, aby wprowadzić grafikę i schematy kolorów na żywo w witrynie.
Projektant stron internetowych powinien również mieć wiedzę na temat pisania kodu, aby zaplanowana grafika lub schemat kolorów były użyteczne dla programisty internetowego. Prosty kod w prostej aplikacji, takiej jak Notatnik, może pomóc projektantowi stron internetowych zająć miejsce w tworzeniu stron internetowych.
Korzystanie z przewijania paralaksy
Przewijanie paralaksy mieści się w granicach pracy zarówno projektanta, jak i programisty. Projektant stron internetowych może stworzyć efekt przewijania paralaksy, używając narzędzi takich jak InVision, UXPin, aby przekazać deweloperowi internetowemu zamierzone zachowanie podczas przewijania. Co więcej, twórca stron internetowych weźmie udział w swoich umiejętnościach, aby stworzyć efekt przewijania paralaksy. Można to zrobić za pomocą różnych technik JavaScript, CSS i jQuery. Szczegółowy opis każdej z tych metod znajduje się w kolejnych rozdziałach.
Zgodnie z definicją podaną w poprzedniej sekcji, parallax scrolling is a technique when the background content is moved at a different speed than the foreground content when scrolling.
Prosta technika CSS do tworzenia efektu przewijania paralaksy jest pokazana na tej stronie - The Urban Walks .
Jak widać na powyższym zrzucie ekranu, telefon komórkowy na środku ekranu zmieni zawartość po dwukrotnym przewinięciu. Zauważ też, że na pierwszym zwoju zmieni się tło z telefonem komórkowym.
To przejście daje wrażenie, że telefon pozostaje na swoim miejscu, a tło zmienia się w miarę przewijania w dół. Efekt ten nazywany jest efektem przewijania paralaksy. Wiesz, że przewijasz go w dół, ponieważ po prawej stronie ekranu znajduje się wskaźnik w postaci kilku kropek.
Pierwsze użycie przewijania paralaksy miało miejsce w starych grach komputerowych. Gdzie stały obraz tła poruszałby się wolniej, gdy postać poruszała się szybciej niż tło. Kilka przykładów takich gier - Disney's Aladdin i Disney's Lion King. Te gry zostały wydane odpowiednio w 1993 i 1994 roku.
Prawdą jest, że zaczęło się od gier, ale obecnie wielu projektantów stron internetowych kładzie nacisk na to, że ich witryna pokocha ich publiczność. Zalety przewijania paralaksy są rozszerzone ze strony internetowej na strony mobilne.
Te strony, kiedyś zaprojektowane z przewijaniem paralaksy dla wersji komputerowych, są dodawane z kodem obsługującym również ekrany mobilne.
Zalety przewijania paralaksy w Internecie i na urządzeniach mobilnych
W tej sekcji omówimy zalety korzystania z przewijania paralaksy z różnych perspektyw, jak omówiono poniżej -
Z perspektywy widza
Istnieje zabawny element związany z przewijaniem paralaksy. Jak widać w powyższym przykładzie, przekazywanie informacji złożonej z tysiąca słów stało się łatwiejsze, gdy użytkownik przewija informacje z różnych ekranów.
Jeśli weźmiemy pod uwagę pierwszego użytkownika, z każdym zwojem wiąże się ciekawość. Dzięki temu nie tylko wzbogaca doświadczenie strony internetowej, ale także zwiększa prawdopodobieństwo, że użytkownik spędza więcej czasu przy pierwszej wizycie na samej stronie.
Odsetek zaangażowania użytkownika dramatycznie wzrasta, gdy użytkownik jest zaintrygowany przewijaniem.
Użytkownik nie musi myśleć o procesie rozgryzania informacji, ponieważ są one dostępne w bardziej oczywisty sposób.
W niektórych przypadkach możesz umieścić historię o oferowanym produkcie / usłudze, animując inne elementy na ekranie, takie jak logo lub ikona menu.
Z perspektywy technicznej
Po zaimplementowaniu przewijania paralaksy w wersji na komputery stacjonarne bardzo łatwo można zastosować tę samą strukturę do witryny mobilnej lub ekranów.
Ponieważ fragment kodu jest prosty i można go ponownie wykorzystać, jeśli jesteś agencją marketingową lub firmą świadczącą usługi internetowe, pozyskiwanie nowych klientów staje się łatwe.
Znajomość przewijania paralaksy wiąże się z większą wiedzą na temat frameworków frontendowych, takich jak CSS, JavaScript itp.
Dla programistów internetowych, jeśli chodzi o tworzenie efektu przewijania paralaksy, dostępne są różne techniki. Jedną z takich technik jest użycieCascaded Styling Sheets(CSS).
CSS wyjaśnia, jak elementy HTML są wyświetlane na ekranie. Można stworzyć plik CSS i wykorzystać go w całej witrynie. Łatwiej jest dodać plik CSS niż dodać style do każdego elementu HTML i zarządzać nimi w różnych częściach strony internetowej.
Note- Niektóre z metod omówionych poniżej w tym rozdziale są specyficzne dla komputerów stacjonarnych, a nie dla urządzeń mobilnych. Zostanie to wspomniane w krokach, gdy dana technika nie jest odpowiednia dla urządzeń mobilnych.
Biorąc pod uwagę odciążenie CSS na cały dodatkowy rysunek do modelu obiektowego dokumentu (DOM), następuje większe wykorzystanie akceleracji sprzętowej i płynny efekt bez obciążania procesora.
Metoda pozycji bezwzględnej
Ta metoda jest często używana do tworzenia efektu paralaksy, ponieważ jest stosunkowo lekki w porównaniu z innymi dostępnymi opcjami. Pozycja obrazu tła jest stała w stosunku do innych treści na ekranie. W omówionym poniżej przykładzie zobaczysz, jak to zrobić, korzystając z magii CSS.
W tej sekcji omówimy dwie metody metody pozycji bezwzględnej -
- Pojedyncze tło
- Wiele tła
Metoda pojedynczego tła
W tej metodzie utworzymy dwa pliki w tym samym folderze. Przestrzegaj poniższych kroków w tym samym celu -
Step 1
Musimy stworzyć dwa pliki w tym samym folderze: pierwszy plik ze znacznikami HTML, a drugi z kodem CSS.
Step 2
Teraz zdefiniujmy nasze znaczniki HTML. Przestrzegaj kodu podanego poniżej -
<html>
<head>
<link rel = "stylesheet" href = "styles.css">
</head>
<body>
<div class = "BgContainer">
<div class = "Parallax">
<h1> Welcome! </h1>
</div>
<div class = "FgContainer">
<div class = "MainContent">
<p>
Here we will go ahead with some content which will really vary
according to the content on your site. I am just typing out this
content as it is sometimes good to engage user than the usual lorem
ipsum text!
<br/>
<br/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.
<br/>
<br/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>
</div>
</body>
</html>Step 3
Otwórz notatnik. Skopiuj i wklej powyższy fragment kodu.
Podczas zapisywania pliku w Save as type, Wybierz All Files. Wprowadź wymaganą nazwę pliku, ale musi ona poprzedzać rozszerzenie -.html jak pokazano na poniższym zrzucie ekranu.
Step 4
Po zapisaniu pliku utwórz kolejny plik w notatniku i wklej podany poniżej kod -
html, body {
font-size: 18px;
line-height: 28px;
}
h1 {
letter-spacing: -15px;
color: white;
text-align: center;
font-size: 200px;
font-weight: 800;
line-height: 200px;
}
BgContainer {
perspective: 1px;
transform-style: preserve-3d;
height: 100vh;
overflow-x: hidden;
overflow-y: scroll;
}
FgContainer {
position: relative;
display: block;
background-color: white;
z-index: 1;
}
MainContent {
max-width: 750px;
margin: 0 auto;
padding: 75px 0;
}
p {
margin: 75px 0;
}
.Parallax {
display: flex;
flex: 1 0 auto;
position: relative;
z-index: -1;
height: 100vh;
justify-content: center;
align-items: center;
transform: translateZ(-1px) scale(2);
background: url(https://cdn.pixabay.com/photo/2017/02/07/09/02/background-2045380_640.jpg);
background-color: rgb(250,228, 216);
}Jak widzieliście w ostatnim kroku, podczas zapisywania pliku, pod Save as typ, wybierz All Files. Wprowadź wymaganą nazwę pliku i dodaj rozszerzenie.css do tego.
Analiza kodu
Zrozummy, która część kodu jest odpowiedzialna za efekt paralaksy. Najważniejsza praca nad paralaksą jest wykonywana przy użyciu perspektywy i reguł transformacji. Odnosić się doline 15w powyższym fragmencie kodu. Perspektywa jest stworzona dla nasBgContainerpierwszy. To inicjuje platformę dla reguły transformacji.
w Parallax kontener zaczynający się na linii 40, transform reguła w linii 48 umieszcza element div BgContainer w tle za pomocą translate (-1px).
Możesz modyfikować wartości parametrów translacji i skalowania, aby zmodyfikować głębokość paralaksy.
Po otwarciu pliku html efekt paralaksy będzie widoczny, jak pokazano poniżej -
Note - W dalszej części samouczka zakłada się, że czytelnik jest w stanie utworzyć pliki HTML i CSS zgodnie ze strukturą folderów przedstawioną w powyższej metodzie.
Metoda wielokrotnego tła
W tej metodzie podczas przewijania strony przez użytkownika będą pojawiać się różne obrazy. Istnieje obrazek z ołówkami, który jest używany w różnych kombinacjach kolorów, aby zilustrować ten efekt.
Obserwuj następujący kod strony HTML, jak pokazano poniżej -
<html>
<head>
<link rel = "stylesheet" href = "styles.css">
</head>
<body>
<h1>Multiple Background Example</h1>
<div class = "parallax">
<div class = "bg__First">First</div>
<div class = "bg__Second">Second</div>
<div class = "bg__Third">Third</div>
<div class = "bg__Fourth">Fourth</div>
</div>
</body>
</html>Podobnie jak w poprzednim przykładzie użyjemy styles.cssprzechowywane w tej samej lokalizacji co ten plik HTML. Mamy trzy różne elementy div nazwane jako Pierwszy, Drugi, Trzeci i Czwarty.
Kod CSS do przewijania paralaksy jest podany poniżej -
body, html {
height : 100%;
font-family : sans-serif;
}
.parallax [class*="bg__"] {
position : relative;
height : 50vh;
text-indent : -9999px;
background-attachment : fixed;
background-position : top center;
background-size : cover;
}
.parallax [class*="bg__"]:nth-child( 2n) {
box-shadow : inset 0 0 1em #111;
}
.parallax .bg__First, .bg__Fourth {
height : 100vh;
}
.parallax .bg__First {
background-image : url("parallax0.png");
}
.parallax .bg__Second {
background-image : url("parallax1.png");
}
.parallax .bg__Third {
background-image : url("parallax2.png");
}
.parallax .bg__Fourth {
background-image : url("parallax1.png");
}Tutaj tworzymy efekt paralaksy z linii 7, ważna jest tutaj ważna właściwość background-attachment:fixed.
Korzystając z tej właściwości, pierwszy obraz z kolorowymi kredkami zawsze pozostanie na górze. Gdy przewiniesz w dół, zaczną się pojawiać różne obrazy opisane w linii 28.
W rezultacie będziesz mógł zobaczyć efekt paralaksy, jak pokazano na poniższym gifie. Poniższy obraz jest zrzutem ekranu przykładu, który rozważaliśmy dla wielu tła.
Czysta paralaksa CSS
Połączmy wiedzę z poprzednich dwóch metod i stwórzmy zaawansowany efekt paralaksy Pure CSS.
Różnica będzie polegała na sposobie ułożenia pliku image element i z-transformwłasność. Wyjaśnienie właściwości zostanie podane po kodzie CSS.
Utwórz plik HTML z następującym kodem, używając zwykłej metody z Notatnika.
<html>
<head>
<link rel = "stylesheet" href = "styles.css">
</head>
<body>
<div class = "wrapParallax">
<div class = "parallax_one">
<img src = "https://cdn.pixabay.com/photo/2018/06/16/15/36/water-lily-3478924_640.jpg" alt = "">
</div>
<div class = "parallax_two">
<h1>Pure CSS Parllax Advanced Level</h1>
</div>
<div class = "parallax_three">
<img src = "https://cdn.pixabay.com/photo/2016/11/29/04/19/beach-1867285_640.jpg" alt = "">
</div>
</div>
</body>
</html>W przypadku pliku CSS kod podano poniżej -
body, html {
padding: 0;
margin: 0;
}
h1 {
color: blue;
text-align: center;
padding: 20px;
text-shadow: 0px 0px 10px #fffff;
}
img {
width:100vw;
height:100vh;
}
.wrapParallax {
perspective: 100px;
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
}
.parallax {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
}
.parallax_one {
transform: translateZ(-100px) scale(2)
}
.parallax_two {
z-index: 10;
transform: translateZ(-200px) scale(3)
}
.parallax_three {
margin-top: 100vh;
}Analiza kodu
Ustaliliśmy położenie pierwszej warstwy w line 26 używając position:absolutewłasność. Pozycje są również zakodowane na stałe na 0.
W parallax_twoczyli warstwa z nagłówkiem, którą zastosowaliśmy z-index: 10aby nadać nagłówkowi efekt unoszenia. Warstwaparallax_three jest przenoszony na dół poprzez podanie właściwości margin-top.
W ten sposób możemy podnieść poziom złożoności naszego efektu paralaksy.
Obserwuj efekt, jak pokazano na poniższym rysunku.
Do stworzenia efektu Parallax najpopularniejszą metodą jest użycie JavaScript. Od tego rozdziału będziemy omawiać koncepcje JavaScript i niektórych bibliotek używanych do osiągnięcia przewijania paralaksy.
Korzystanie z czystego języka JavaScript ma sens, aby utrzymać optymalną wydajność witryny. Istnieje wiele innych zalet korzystania z bibliotek z punktu widzenia wydajności. Jednak aby lepiej zrozumieć organizację kodu, zaczniemy od implementacji czystej paralaksy JavaScript. Ciekawostka, czasami nazywany jest również czysty JavaScriptvanilla JavaScript.
Przewijanie paralaksy przy użyciu czystego JavaScript
Najpierw utwórz główny plik HTML z kodem pokazanym poniżej. Strona HTML będzie składać się tylko z czterech nagłówków.
<html>
<head>
<link rel = "stylesheet" href = "styles.css">
<script src = "myscripts.js"></script>
</head>
<body>
<section class = "parallax">
<h1>The First Scroll</h1>
</section>
<section class = "parallax">
<h1>The Second One</h1>
</section>
<section class = "parallax">
<h1>GoingOn !!</h1>
</section>
<section class = "parallax">
<h1>And we've reached the bottom!!</h1>
</section>
</body>
</html>Zauważ, że w linii numer 4 w tym przykładzie używamy myscripts.js plik, który zostanie zapisany w tym samym folderze co plik HTML i plik CSS.
Teraz przygotujmy nasz plik CSS, jak pokazano poniżej.
header {
height: 4em;
background: #845;
}
.parallax {
background-repeat: no-repeat;
background-size: cover;
}
.parallax h1 {
text-align: center;
margin: 0;
font-size: 2.5em;
letter-spacing: .2em;
color: red;
padding: 10rem 0;
mix-blend-mode: exclusion;
}
.parallax:nth-of-type(1) {
background: url(https://pixabay.com/get/ea35b10621f0083ed1534705fb0938c9bd22ffd41cb2114296f0c679a4/background-3009949_1920.jpg);
}
.parallax:nth-of-type(1) h1 {
padding: 15rem 0;
}
.parallax:nth-of-type(2) {
background: url(https://pixabay.com/get/ea35b10621f0083ed1534705fb0938c9bd22ffd41cb2114296f0c679a4/background-3009949_1920.jpg);
}
.parallax:nth-of-type(2) h1 {
padding: 12rem 0;
}
.parallax:nth-of-type(3) {
background: url(https://pixabay.com/get/ea35b10621f0083ed1534705fb0938c9bd22ffd41cb2114296f0c679a4/background-3009949_1920.jpg);
}
.parallax:nth-of-type(4) {
background: url(https://pixabay.com/get/ea35b10621f0083ed1534705fb0938c9bd22ffd41cb2114296f0c679a4/background-3009949_1920.jpg);
}Teraz pora na część JavaScript, utwórz plik w notatniku i zapisz go jako myscripts.js .
function $$(selector, context) {
context = context || document;
var elements = context.querySelectorAll(selector);
return Array.prototype.slice.call(elements);
}
window.addEventListener("scroll", function() {
var scrolledHeight= window.pageYOffset;
$$(".parallax").forEach(function(el,index,array) {
var limit = el.offsetTop+ el.offsetHeight;
if(scrolledHeight > el.offsetTop && scrolledHeight &l;= limit) {
el.style.backgroundPositionY= (scrolledHeight - el.offsetTop) /1.5+ "px";
} else {
el.style.backgroundPositionY= "0";
}
});
});Analiza kodu
Przeanalizujmy kod JavaScript.
Kod z line number 1 to 4 reprezentuje funkcję pomocniczą.
W linii 6 wybieramy nasz element paralaksy i dodajemy scrollwydarzenie do okna. Aby określić, ile obszaru jest przewijane, używamyscrolledHeightwłasność. Gdy ekran przewija się w dół,backgroundPositionY jest aktualizowana dla elementu paralaksy.
Aby spowolnić efekt paralaksy, podzieliliśmy przez 1,5, tę liczbę można zmienić na dowolną liczbę.
Teraz będziesz mógł zobaczyć przewijaną stronę w dół, jak pokazano na poniższym zrzucie ekranu.
Korzystanie z biblioteki JavaScript ScrollMagic
Jak omówiono w poprzedniej sekcji, chociaż możemy używać czystego JavaScript do tworzenia efektu paralaksy, istnieje kilka potężnych bibliotek JavaScript, które poprawią wrażenia użytkownika. ScrollMagic jest jedną z takich bibliotek do tworzenia interakcji przewijania paralaksy.
Omówmy więcej na ten temat na przykładzie podanym poniżej -
Note- W tym przykładzie dla uproszczenia CSS będzie przechowywany w pliku HTML. Ponadto kod JavaScript będzie obecny w tym samym dokumencie. Krótko mówiąc, utworzymy tylko jeden plik HTML i będzie on zawierał odwołania do bibliotek ScrollMagic wraz z wymaganym CSS.
<html>
<head>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.1/TweenMax.min.js"></script>
<script src = "http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.js"></script>
<script src = "http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.gsap.js"></script>
<script src = "http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.js"></script>
</head>
<body>
<style type = "text/css">
.parallaxParent {
height: 100vh;
overflow: hidden;
}
.parallaxParent > * {
height: 200%;
position: relative;
top: -100%;
}
</style>
<div class = "spacing0"></div>
<div id = "parallax1" class = "parallaxParent">
<div style = "background-image: url(https://cdn.pixabay.com/photo/2015/05/16/19/13/stones-770264_640.jpg);"></div>
</div>
<div class = "spacing1">
<div style = "background-color:cyan">
<p>These are bricks</p>
</div>
</div>
<div class = "spacing0"></div>
<div id="parallax2" class = "parallaxParent">
<div style = "background-image: url(https://cdn.pixabay.com/photo/2015/05/16/19/13/stones-770264_640.jpg);"></div>
</div>
<div class = "spacing1">
<div style = "background-color:yellow">
<p>Some More Bricks</p>
</div>
</div>
<div class = "spacing0"></div>
<div id = "parallax3" class = "parallaxParent">
<div style = "background-image: url(https://cdn.pixabay.com/photo/2015/05/16/19/13/stones-770264_640.jpg);"></div>
</div>
<div class = "spacing2"></div>
<script>
// init controller
var controller = new ScrollMagic.Controller({
globalSceneOptions: {triggerHook: "onEnter", duration: "200%"}});
// build scenes
new ScrollMagic.Scene({triggerElement: "#parallax1"})
.setTween("#parallax1 > div", {y: "80%", ease: Linear.easeNone})
.addIndicators()
.addTo(controller);
new ScrollMagic.Scene({triggerElement: "#parallax2"})
.setTween("#parallax2 > div", {y: "80%", ease: Linear.easeNone})
.addIndicators()
.addTo(controller);
new ScrollMagic.Scene({triggerElement: "#parallax3"})
.setTween("#parallax3 > div", {y: "80%", ease: Linear.easeNone})
.addIndicators()
.addTo(controller);
</script>
</body>
</html>Jak pokazano w powyższym kodzie, mamy wymagane odniesienia do bibliotek JavaScript z line 3 to 6. Kod CSS jest określany w wierszach od 9 do 19.
Sieć dostarczania treści
Odnośniki do skryptów od linii 3 do 6 wskazują na adresy URL ScrollMagic Content Delivery Network (CDN). Korzystanie z CDN ma sens przy tworzeniu nowoczesnych witryn internetowych, ponieważ ładujesz wymagane biblioteki bez spowalniania witryny.
Jeśli w bibliotekach są wymagane dostosowania, należałoby udostępnić biblioteki na ich odpowiednich serwerach, aby wykorzystać te efekty. Jeśli korzystasz z podstawowych funkcjonalności z biblioteki, efektywne jest użycie adresu URL CDN.
Powyższy kod HTML przedstawia obraz oddzielony 2 podziałami. Pierwszy podział pojawia się z nagłówkiem -These are bricks a drugi podział pojawia się z - Some More Bricks.
Zauważ, że w kodzie CSS od linii 9 do 19 określamy tylko położenie i styl odpowiedniego elementu div z paralaksą.
Praca nad stworzeniem tej miękkiej paralaksy scenejest wykonywana przez bibliotekę ScrollMagic. Jeśli odnosisz się do kodu skryptu od linii 43 do 62, ScrollMagiccontroller jest wywoływana i scene jest tworzone.
Sceny prowadzą DOM do tworzenia efektu paralaksy, gdy 80% ekranu jest zajęte. JavaScript służy do zrozumienia wyzwalacza przewijania. W rezultacie otrzymujesz płynne wrażenia na tej stronie.
Note - Biorąc pod uwagę powyższy obraz jako obraz GIF, nie zobaczysz płynnego efektu podziałów tekstu.
Animacje wyzwalania
Biblioteka ScrollMagic daje nieograniczone możliwości tworzenia różnorodnych doświadczeń użytkownika. Obserwuj fragmenty kodu podane poniżej, aby wyzwalać animacje podczas przewijania.
Zwróć uwagę, że potrzebujesz do tego dwóch plików * minus; jeden plik HTML i jeden plik CSS.
Utwórz plik HTML z kodem pokazanym poniżej -
<html>
<head>
<link rel = "stylesheet" href = "style.css">
<script src = "https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.1/TweenMax.min.js"></script>
<script src = "http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.js"></script>
<script src = "http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.gsap.js"></script>
<script src = "http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.js"></script>
</head>
<body>
<div class = "spacing0"></div>
<div id = "parallax1" class = "parallaxParent">
<div style = "background-image: url(https://cdn.pixabay.com/photo/2015/05/16/19/13/stones-770264_640.jpg);"></div>
</div>
<div style = "height:450px;"></div>
<div id = "square" class = "square">This is it!</div>
<div style = "height:450px;"></div>
<script>
var controller = new ScrollMagic.Controller();
var scene = new ScrollMagic.Scene({triggerElement: "#parallax1"})
.setTween("#parallax1 > div", {y: "40%", ease: Linear.easeNone})
.addTo(controller);
var scene = new ScrollMagic.Scene({triggerElement: '.square'})
.setClassToggle('.square', 'show')
.addTo(controller);
</script>
</body>
</html>Teraz utwórz plik CSS zawierający następujący kod.
.square {
background: aqua;
margin: 0 auto;
display: block;
padding: 40px 0;
text-align: center;
color: #000;
font-size: 40px;
font-weight: bold;
opacity: 0;
transition: .3s;
width: 0%;
}
.square.show{
opacity: 1;
width: 100%;
}
.parallaxParent {
height: 100vh;
overflow: hidden;
}
.parallaxParent > * {
height: 200%;
position: relative;
top: -100%;
}Analiza kodu
Odnosząc się do kodu HTML, kod ScrollMagic zaczyna się od line 17 i trwa do line 25. W tej sekcji tworzymy dwie sceny ScrollMagic. Pierwsza scena dotyczy obrazu cegły, a druga animacji banera.
Jak określono w setTween funkcja włączona line 20, gdy przewijanie ma miejsce przy 40% wielkości ekranu, rozpoczyna się następna scena, na której pojawia się baner. To jest to!
Nieprzezroczystość div z id - square jest kontrolowany w pliku CSS na line 10 i line 15.
W rezultacie zobaczysz poniższą animację na stronie.
Przewijanie w poziomie
Możemy również zastosować przewijanie paralaksy i uzyskać przewijanie w poziomie. Biblioteka ScrollMagic może służyć do tworzenia efektu przewijania w poziomie. Zobacz kod poniżej.
Chociaż kod jest prosty do tworzenia efektu przewijania w poziomie, będziemy potrzebować odniesienia jQuery do uzyskania poziomego ruchu ekranów. Szczegóły dotyczące jQuery znajdują się w następnym rozdziale, na razie wystarczy postępować zgodnie z kodem podanym poniżej.
Stworzymy trzy osobne pliki - plik HTML dla głównego kodu, plik CSS dla stylów i plik JS dla wywołań funkcji ScrollMagic.
Oto kod dokumentu HTML.
<html>
<head>
<link rel = "stylesheet" href = "style.css">
</head>
<script src = 'http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src = 'http://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js'></script>
<script src = 'https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.2/ScrollMagic.min.js'></script>
<script src = 'https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.2/plugins/animation.gsap.js'></script>
<script src = 'https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.2/plugins/debug.addIndicators.min.js'></script>
<script src = "animation.js"></script>
<body>
<div class = "wrapper" id = "js-wrapper">
<div class = "sections" id = "js-slideContainer">
<section class = "section">
<span class = "section__title" id = "title1">Scroll Once</span>
<span id = "trigger--title1"></span>
</section>
<section class = "section">
<span class = "section__title" id = "title2">Do It Again</span>
<span id = "trigger--title2"></span>
</section>
<section class = "section">
<span class = "section__title" id = "title3">Thank You!</span>
<span id = "trigger--title3"></span>
</div>
</div>
</body>
</html>Zwróć uwagę, że mamy trzy sekcje, które pojawią się po przewinięciu. Te trzy sekcje są oznaczone identyfikatorami tytuł1, tytuł2 i tytuł3 w wierszach, odpowiednio, 15, 19 i 23.
Kod dokumentu CSS jest podany poniżej -
body {
font-family: serif;
}
body, html {
height: 100%;
}
.wrapper {
width: 100%;
height: 100%;
overflow: hidden;
}
.section {
height: 100%;
width: calc( 100% / 5 );
float: left;
position: relative;
}
.section:nth-child(1) {
background: green;
}
.section:nth-child(2) {
background: orange;
}
.section:nth-child(3) {
background: red;
}
.sections {
width: 500%;
height: 100%;
}
.section__title {
position: absolute;
top: 50%;
left: 50%;
font-size: 30px;
color: #fff;
}Analiza kodu
Kolory tła dla trzech ekranów (lub sekcji) są podane na lines 10, 22 i 25.
Obliczamy względną szerokość każdego ekranu w kodzie, zaczynając od line 13.
Kod JavaScript dla ScrollMagic jest podany poniżej -
$(function () {
var controller = new ScrollMagic.Controller();
var horizontalSlide = new TimelineMax()
.to("#js-slideContainer", 1, {x: "-20%"})
.to("#js-slideContainer", 1, {x: "-40%"})
new ScrollMagic.Scene({
triggerElement: "#js-wrapper",
triggerHook: "onLeave",
duration: "400%"
})
.setPin("#js-wrapper")
.setTween(horizontalSlide)
.addTo(controller);
});Zwróć uwagę na triggerHookwłaściwość w linii 8. Ta właściwość jest odpowiedzialna za zapewnienie efektu przewijania, gdy użytkownik osiągnie zakończenie zdarzenia przewijania. FunkcjaTimelineMax odpowiada za zapewnienie efektu przewijania w poziomie na naszych ekranach.
Po utworzeniu odpowiednich plików będziesz mógł zobaczyć animację przewijania w poziomie, jak pokazano poniżej.
W poprzednich rozdziałach zrozumieliśmy, jak dobre efekty przynosi wykorzystanie bibliotek JavaScript do strony internetowej. JavaScript, w połączeniu z Photoshopem, zapewnia fenomenalną elastyczność i łatwość dodawania przewijania paralaksy do Twojej witryny.
W tym rozdziale przyjrzymy się trzem wtyczkom Photoshopa, aby dodać efekt przewijania paralaksy. Podobnie jak w poprzednim rozdziale o JavaScript, będziemy używać odniesień Photoshopa w naszym kodzie HTML, aby stworzyć potężne przewijanie paralaksy w Photoshopie.
Ważną kwestią, na którą należy zwrócić uwagę na temat wtyczek programu Photoshop, jest to, że często wtyczki nie są aktualizowane, dlatego przed rozpoczęciem korzystania z jakichkolwiek wtyczek do przewijania paralaksy warto przeprowadzić pewne badania.
Przewijanie paralaksy przy użyciu prostego Parallax.js
Parallax.js za pomocą wtyczki Photoshopa, możemy stworzyć efekt przewijania paralaksy bez większych kłopotów. Biorąc pod uwagę, że wtyczka jQuery wymaga włączenia wysokiej klasy bibliotek, takich jak bootstrap. Zauważ, że w tym rozdziale w kodzie będą tagi HTML5.
Spójrzmy na plik HTML pokazany poniżej -
<!DOCTYPE html>
<html lang = "en">
<head>
<title>Parallax.js | Simple Parallax Scrolling Effect with jQuery</title>
<meta charset = "utf-8">
<meta http-equiv = "X-UA-Compatible" content = "IE = edge">
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link href = "css/bootstrap.min.css" rel = "stylesheet">
<link href = "css/style.css" rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src = "https://cdn.jsdelivr.net/parallax.js/1.4.2/parallax.min.js"></script>
</head>
<body>
<section>
<div class = "container">
<h1>Example on Parallax.js</h1>
<p data-pg-collapsed>
This is an example of parallax scrolling using Parallax.js jQuery Plugin.
</p>
<br/>
</div>
</section>
<div class = "parallax-container" data-parallax = "scroll"
data-position = "top" data-bleed = "10"
data-image-src = "https://pixabay.com/get/ea31b90a2af5093ed1534705fb0938c9bd22ffd41cb2114595f9c67dae/clematis-3485218_1920.jpg"
data-natural-width = "1600" data-natural-height = "800" >
</div>
<section>
<div class = "container">
<h2 id = "sampleLorem">Sample Text Here</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec
odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla
quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent
mauris. Fusce nec tellus sed augue semper porta. Mauris massa.
Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad
litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero.
<br/>
<br/>
Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean
quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis
tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus
risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis
quis ligula lacinia aliquet. Mauris ipsum.
<br/>
<br/>
Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh.
Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad
litora torquent per conubia nostra, per inceptos himenaeos. Nam nec
ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing
diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla.
Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet.
Vestibulum sapien. Proin quam. Etiam ultrices. Suspendisse in justo eu
magna luctus suscipit.
<br/>
<br/>
Sed lectus. Integer euismod lacus luctus magna. Quisque cursus, metus
vitae pharetra auctor, sem massa mattis sem, at interdum magna augue
eget diam. Vestibulum ante ipsum primis in faucibus orci luctus et
ultrices posuere cubilia Curae; Morbi lacinia molestie dui. Praesent
blandit dolor. Sed non quam. In vel mi sit amet augue congue elementum.
Morbi in ipsum sit amet pede facilisis laoreet. Donec lacus nunc,
viverra nec, blandit vel, egestas et, augue. Vestibulum tincidunt
malesuada tellus. Ut ultrices ultrices enim. Curabitur sit amet mauris.
Morbi in dui quis est pulvinar ullamcorper.
<br/>
<br/>
Nulla facilisi. Integer lacinia sollicitudin massa. Cras metus. Sed
aliquet risus a tortor. Integer id quam. Morbi mi. Quisque nisl felis,
venenatis tristique, dignissim in, ultrices sit amet, augue. Proin
sodales libero eget ante. Nulla quam. Aenean laoreet. Vestibulum nisi
lectus, commodo ac, facilisis ac, ultricies eu, pede. Ut orci risus,
accumsan porttitor, cursus quis, aliquet eget, justo. Sed pretium
blandit orci.
<br/>
<br/>
Ut eu diam at pede suscipit sodales. Aenean lectus elit, fermentum non,
convallis id, sagittis at, neque. Nullam mauris orci, aliquet et,
iaculis et, viverra vitae, ligula. Nulla ut felis in purus aliquam
imperdiet. Maecenas aliquet mollis lectus. Vivamus consectetuer risus
et tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed
nisi. Nulla quis sem at nibh elementum imperdiet.
<br/>
<br/>
</p>
</div>
</section>
<div class = "parallax-container" data-parallax = "scroll"
data-bleed = "10" data-speed = "0.2"
data-image-src = "https://pixabay.com/get/ea31b90620f0063ed1534705fb0938c9bd22ffd41cb2114594f0c37cae/chamomile-3489847_1920.jpg"
data-natural-width = "1600" data-natural-height = "801"
data-pg-name = "PARALLAX IMAGE 002">
</div>
</body>
</html>Kod analizy
Powyższe fragmenty kodu pokazują kod strony z dwoma obrazami i przykładowym tekstem między nimi.
Jak widać, kod zaczyna się od <!DOCTYPE html>Jest to typowy sposób informowania przeglądarek, że kod jest oparty na HTML5.
the <meta> tagi z line 4 to 6pokazuje kod, który jest maszyną do interpretacji. Nie będziesz w stanie zobaczyć wpływu tego kodu. Ważną rzeczą, na którą należy zwrócić uwagę, jest - zmeta tag, twórcy stron internetowych uzyskują lepszą kontrolę nad wyświetlanymi danymi.
Również na line 8 and 9, Dołączyliśmy arkusze stylów CSS wraz z Bootstrap. Bootstrap jest powszechnie używaną biblioteką dla określonego kroju czcionki i typografii.
Lines 10 and 11zadbaj o biblioteki Photoshop i Parallax.js. Ważne jest, aby uwzględnić kontrolę nad Parallax.js, aby uzyskać efekt obrazów paralaksy. Będziesz mógł znaleźćdata-parallax nieruchomość z div na line 21, Co jest wystarczające, aby wywołać bibliotekę parallax.js dla uzyskania wymaganego efektu paralaksy.
Efekt paralaksy można zobaczyć w kodzie na lines 21 i line 40. Ważnymi właściwościami, które powodują ten efekt w przypadku parallax.js są -data-parallax, data-image-src, data-natural-width, data-natural-height.
W pliku CSS musimy podać tylko jedną właściwość. Jest jak pokazano poniżej -
.parallax-container {
height: 500px;
width: 100%;
}W powyższym kodzie HTML stworzyliśmy określoną strukturę dla plików CSS. Będziemy mieć folder o nazwiecss, który będzie zawierał pliki CSS - bootstrap.min.css i style.css.
Gdy wszystko jest gotowe z dokumentami, będziesz mógł zobaczyć efekt paralaksy, jak pokazano poniżej -
Parallaxator przy użyciu wtyczki Photoshop
Wtyczka Parallaxator best of Photoshop zapewnia efekty przewijania paralaksy i jest łatwa w użyciu. Możesz pobrać wtyczkę Parallaxator, jej pliki CSS i JS z tego linku - Parallaxator GitHub .
Po pobraniu plików CSS i JS możesz użyć poniższego kodu, aby utworzyć kod HTML.
<!DOCTYPE html>
<html>
<head>
<title>Parallaxator Plugin</title>
<meta http-equiv = "Content-Type" content = "text/html; charset = utf-8">
<link rel = "stylesheet" href = "fm.parallaxator.jquery.css">
<link rel = "stylesheet" href = "style.css">
<script src = "https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src = "fm.parallaxator.jquery.js"></script>
</head>
<body>
<div class = "section1 parallaxator">
<img class = "parallax_child" src = "img/landscape.jpg" width = "100%">
<h1 class = "mega_text parallax_child">Nature</h1>
</div>
<div class = "section2 parallaxator">
<img class = "parallax_child" src = "img/architecture.jpg" width = "100%">
<h1 class = "mega_text parallax_child">
Architecture<br>
</h1>
</div>
<div class = "section3 parallaxator">
<img class = "parallax_child" src = "img/architecture1.jpg" width = "100%">
<h1 class = "mega_text parallax_child" data-parallaxator-reverse = "true" data-parallaxator-velocity = "0.35">
Architecture again!
</h1>
</div>
</body>
</html>Kod analizy
Efekt paralaksy zapewnia klasa parallax_child, która jest dostarczana z każdym znacznikiem img. Parallax_child jest połączony z plikami CSS i JS, które są podane poniżej.
Aby paralaksator działał, dołączyliśmy fm.parallaxator.jquery.css i fm.parallaxator.jquery.js. Te pliki muszą być dostępne w tym samym katalogu, co plik HTML.
Kod CSS jest przedstawiony poniżej -
body {
font-family: sans-serif;
margin: 0;
padding: 0;
}
.section1,.section2, .section3 {
border-bottom: 32px solid #fff;
padding-top: 40%;
}
.section1 {
background-color: #fdb;
}
.section2 {
background-color: #bdf;
}
.section3 {
background-color: #fbd;
}
.mega_text {
font-weight: bold;
font-size: 100px;
margin: 0;
text-shadow: 0 10px 100px #fff, 0 0 15px #fff;
padding: 64px;
display: block;
}W wyniku powyższego kodu będziesz mógł zobaczyć efekt paralaksy.
Wtyczka Stellar.js jQuery do przewijania paralaksy
Stellar.js to kolejny dodatek do listy wtyczek Parallax Photoshop. Chociaż nie jest już obsługiwany, deweloperzy, którzy korzystali z jego stabilnej wersji, mogą z łatwością używać efektu przewijania paralaksy. Jest kompatybilny z najnowszymi wersjami programu Photoshop i łatwy do wdrożenia.
Będziesz musiał pobrać najnowszą wersję jquery.stellar.js z oficjalnej strony wtyczki Stellar.js . Po pobraniu utwórz ten plik wtyczki w tym samym folderze, co pliki HTML i CSS.
Przyjrzyjmy się kodowi HTML.
<!doctype html>
<html>
<head>
<title>Stellar.js Demo</title>
<link href = "style.css" rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src = "jquery.stellar.js"></script>
<script>
$(function(){
$.stellar({
horizontalScrolling: false,
verticalOffset: 40
});
});
</script>
</head>
<body>
<h1>Demo Site</h1>
<div class = "image architecture" data-stellar-background-ratio = "0.5">
<span>Architecture</span>
</div>
<div class = "image abstract" data-stellar-background-ratio = "0.5">
<span>Abstract</span>
</div>
<div class = "image landscape" data-stellar-background-ratio = "0.5">
<span>Landscape</span>
</div>
<div class = "image window" data-stellar-background-ratio = "0.5">
<span>Window</span>
</div>
</body>
</html>Kod analizy
Aby Stellar.js działał, dołączyliśmy bibliotekę zaraz po odwołaniu się do wtyczki Photoshopa w jquery.stellar.js line 6.
Funkcje dla paralaksy gwiazd są wywoływane w tagu skryptu z line 8 to line 15. Z nieruchomościądata-stellar-background-ratio, Ustawiamy przesunięcie wyświetlanych obrazów. To się dziejelines 19,20,21 and 22.
Kod CSS jest podany poniżej -
body {
font-family: helvetica, arial;
padding-top: 40px;
}
h1 {
background-color: black;
color: white;
height: 40px;
font-size: 24px;
font-weight: normal;
left: 0;
line-height: 40px;
position: fixed;
text-align: center;
top: 0;
width: 100%;
z-index: 1;
}
h1 a {
border-bottom: 1px solid white;
color: white;
display: inline-block;
line-height: 30px;
text-decoration: none;
}
.image {
background-attachment: fixed;
background-position: 50% 0;
background-repeat: no-repeat;
height: 450px;
position: relative;
}
.image span {
bottom: 0;
color: white;
display: block;
left: 50%;
margin-left: -640px;
font-size: 38px;
padding: 10px;
position: absolute;
text-shadow: 0 2px 0 black, 0 0 10px black;
width: 1280px;
}
.architecture {
background-image: url(img/architecture.jpg);
}
.abstract {
background-image: url(img/ruin.jpg);
}
.landscape {
background-image: url(img/landscape.jpg);
}
.window {
background-image: url(img/window.jpg);
}Po utworzeniu obu plików i stellar.js plik wtyczki zostanie umieszczony w tym samym folderze, powinieneś być w stanie zobaczyć efekt, jak pokazano na zrzucie ekranu podanym poniżej -
Bootstrap to popularny framework z wieloma gotowymi do użycia komponentami do wyboru. Bootstrap może zoptymalizować kod do implementacji przewijania paralaksy.
W tym rozdziale z przykładem Omówmy, w jaki sposób zamierzamy użyć komponentu Jumbotron do zaimplementowania przewijania paralaksy.
Cała strona z Parallax Bootstrap4 Jumbotron
Wyobraź sobie witrynę internetową, w której użytkownik jest wyświetlany z dużym polem z wezwaniem do działania zawierającym treść dotyczącą rabatu lub wyprzedaży. Zwykle Jumbotron znajduje zastosowanie w takich miejscach. Jest to duże pudełko przydatne do zwrócenia uwagi użytkownika.
Ponieważ używamy tylko jednego składnika Bootstrap, nie utworzymy oddzielnego pliku CSS dla tego przykładu. Zanurzmy się bezpośrednio w kodzie HTML.
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
<link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity = "sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin = "anonymous">
<style>
.jumbotron{
margin:15px 30px 0px 30px;
border-radius:10px;
background:
linear-gradient(
rgba(0, 0, 250, 0.25),
rgba(125, 250, 250, 0.45)),
url(img/ruin.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
color:white !important;
height:440px;
}
.page-scroll {
height:5000px;
}
.lead {
font-family:raleway;
font-weight:100;
margin-top:-10px;
}
</style>
</head>
<body>
<div class = "jumbotron jumbotron-fluid">
<div class = "container">
<h1 class = "display-2">Jumbotron Example</h1>
<p class = "lead">Example text for parallax using jumbotron</p>
</div>
</div>
<div class = "page-scroll"> </div>
</body>
</html>Kod analizy
the line 64 odniesienia do biblioteki Bootstrap. Określamy margines i promień obramowania dla Jumbotron zline 8 to 11.
Jak widzimy dalej line 33, Tworzymy div z klasą Jumbotron, aby pokazać duże pole, w którym załadowany zostanie nasz konkretny obraz. Należy pamiętać, że tym razem nie ma bezpośredniego adresu URL dla obrazu, zamierzamy użyć pobranego obrazu. Możesz pobrać przykładowe obrazy w wysokiej rozdzielczości i określić je w formacieline 16.
Dane wyjściowe, które możesz zobaczyć po wykonaniu powyższego kodu, pokazano poniżej -
W tym samouczku zbadaliśmy różne biblioteki do tworzenia przewijania paralaksy. Omówiliśmy wszystkie aspekty od poziomu podstawowego do poziomu zaawansowanego, gdzie używaliśmy CSS Bootstrap, gdzie używaliśmy do tworzenia front-endu. Sugerujemy, abyś wykorzystał swoje kreatywne umiejętności, aby stworzyć stronę internetową, którą trudno zignorować. Pamiętaj, że w przypadku przewijania paralaksy w Internecie jest mnóstwo przykładów, które mogą dostarczyć Ci inspiracji.
Wykorzystanie przewijania paralaksy
Jak już omówiliśmy we wstępnych rozdziałach, możesz użyć przewijania paralaksy, aby uzyskać niezwykłe wrażenia użytkownika. Oto kilka pomysłów na stronę, w której można włączyć przewijanie paralaksy.
Oś czasu witryny
Witryny tego typu zazwyczaj zawierają historię do opowiedzenia o produkcie, firmie lub czymkolwiek innym. Możesz stworzyć efekt paralaksy, aby przedstawić historię odwiedzającym i utrzymać ich zaangażowanie za pomocą różnych animacji.
W przypadku witryny z osią czasu warto utworzyć tło i wyświetlać zawartość tekstową na pierwszym planie. Możesz współpracować z grafikiem, aby stworzyć grafikę, która będzie pasować do tła.
Witryna aplikacji mobilnej
W dzisiejszych czasach aplikacja mobilna jest niezbędna dla każdego produktu / usługi. Jest wiele startupów, które chcą stworzyć witrynę z aplikacjami mobilnymi, która wyjaśnia, co może, a czego nie może zrobić aplikacja mobilna.
Apple App Store, znany z surowych wytycznych dotyczących tworzenia aplikacji, wymaga, aby aplikacja mobilna miała witrynę pomocy technicznej. Ta strona internetowa zawsze musi być atrakcyjna i przyjazna dla użytkownika.
Korzystając z przewijania paralaksy, możesz użyć obrazu mobilnego i wyświetlać różne typy funkcji, gdy użytkownik przewija stronę w dół. Jeden z takich przykładów został już omówiony w rozdziale 4 tego samouczka.
Efekty myszy nad efektami
Możesz użyć przewijania paralaksy i najeżdżać myszą, aby stworzyć kolejny poziom animacji. Po najechaniu myszą możesz kontrolować kierunek przewijania i stworzyć efekt paralaksy.
W ten sposób istnieje wiele możliwości tworzenia wspaniałych wrażeń. Wystarczy pomysł i odpowiedni zestaw narzędzi i bibliotek.
Przyszłość interfejsu WWW
Dzięki sile technologii i kreatywnym elementom, takim jak przewijanie paralaksy, istnieje niespotykana dotąd konkurencja, która zapewnia użytkownikom niesamowite wrażenia. Nie ogranicza się to tylko do witryn internetowych, ale zostało również rozszerzone na witryny mobilne.
Chociaż interfejs użytkownika sieci Web jest obecnie na szczycie, posiadanie strony internetowej kompatybilnej z urządzeniem mobilnym wymaga czasu. Jak widzieliśmy w przykładach dla Bootstrap i jQuery, witryna nie może żyć długo, jeśli nie jest obsługiwana na urządzeniach przenośnych.
Wraz z istniejącymi bibliotekami, przyszłość doświadczeń użytkowników z niecierpliwością wyczekuje również sztucznej inteligencji i wirtualnej rzeczywistości. Istnieje kilka stron internetowych, które można przeglądać przy użyciu sprzętu VR. W takiej sytuacji utrzymywanie kontaktu z najnowszymi wtyczkami, a także szukanie nowych wtyczek naprawdę ma sens.
Wykorzystujesz wiedzę zdobytą w tym samouczku do tworzenia najlepszych doświadczeń użytkownika. Życzę powodzenia i sukcesów w tworzeniu stron internetowych!