Techniki CSS
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 pozostałej 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.
