Postępując z pierwszą zasadą tego bloga łączymy wynalazki z przeszłości z futurystycznymi nowinkami, aby móc się delektować efektem w teraźniejszości. Dziś, właśnie w tej chwili, połączymy znany pewnie niektórym z Was pasek postępu przewinięcia strony, z wykorzystaniem elementów HTML, których zazwyczaj nie wykorzystujesz.
Legenda o czerwonym pasku.
Pasek, o którym mowa, to poziomy... pasek zazwyczaj umieszczony u góry strony, który zwiększą swą długość wraz z postępem przewinięcia strony. Jeśli jesteśmy na górze strony to ma długość 0, jeśli doscrollowaliśmy do końca, to pasek wypełnia całą szerokość. Są dwie możliwości jego stworzenia: z wykorzystaniem JS, wtedy mamy większe pole do popisu, bo możemy pasek umieścić właściwie w dowolnym miejscu strony, jak i decydować o kształcie jego zakończenia (o czym dalej), i oczywiście pure CSS, które to rozwiązanie jest trochę mniej elastyczne, ale równie efektowne. I o tym drugim dziś. Ale inaczej, a jakżeby!
Jeśli interesuje Cię oryginalny skrypt, to jest dostępny tu: https://codepen.io/MadeByMike/full/ZOrEmr
Najpierw rysunkowe wyjaśnienie działania:
Back to the HTML!
Oryginalny skrypt angażuje elementy BODY i jego pseudoelement. Elementy HEADER oraz MAIN są właściwie dla estetyki - można się ich pozbyć, delikatnie zmodyfikować CSS i efekt nadal będzie działał. Ale czy musimy wykorzystywać BODY i dodatkowo tracić jego pseudoelement? Przecież przewijany jest cały element HTML. Czy możemy zwolnić z obowiązku BODY? Do dzieła!
Jeśli chodzi o HTML, to dla zaprezentowania działania potrzebujemy zapełnić BODY dużą ilością tekstu:
<body>
Tu dużo tekstu, aby strona stała się przewijalna
</body>
Pasek natomiast ukryjemy w elemencie HTML, a pseudoelement przykrywający resztę gradientu przeniesiemy z BODY właśnie do niego.
html {
background-image:
/* paski co 10% */
linear-gradient(
to right,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0) 98%,
rgb(128, 0, 0) 98%
),
/* nasz trójkątny gradient */
linear-gradient(
to right top,
rgb(255, 0, 0) 0%,
rgb(255, 0, 0) 50%,
rgb(255, 255, 255) 50%
rgb(255, 255, 255) 100%
);
/* paski/tło powtarzalne co 10%,
drugie tło - trójkąt
o wysokości przestrzeni
scrollowanej
*/
background-size: 10% 100%, 100% calc(100% - 100vh + 5px);
}
/* przykrywamy całość
białym tłem odsłaniając
tylko 5px od góry
(tyle będzie widać paska)
*/
html:before {
position: fixed;
content: "";
top: 5px;
background: #fff;
height: 100%;
width: 100%;
}
body {
margin: 0;
position: relative;
}
W HTML mamy dwa gradienty. Pierwszy z nich to powtarzający się 10-krotnie pionowy pasek, który da nam wyobrażenie, w jakim procencie przewinięcia jesteśmy (utworzy 10 pasków co 10%), drugi to osławiony trójkąt. Ten drugi ma wysokość, która jest równa przestrzeni scrollowanej. Tak więc jest to różnica wysokości BODY - wysokość ekranu + przestrzeń zajmowana przez pasek (100% - 100vh + pasek). Pseudoelement odkrywa nam wycinek gradientów, natomiast resztę strony przykrywa białym tłem. Do BODY dodajemy tylko position:relative, co zapewni nam ułożenie na warstwie wyższej niż pseudoelement z HTML.
Jak być może zauwazyłeś końcówka paska nie ma równej pionowej krawędzi. Wynika to z tego, że widzimy ukośną krawędź trójkątnego gradientu. Tym bardziej "poszarpana" jest końcówka, im pasek ma większą wysokość (im więcej go widać) oraz im niższy jest trójkąt, a dokładnie bardziej pozioma jego ukośna krawędź (a to wynika z wysokości przestrzeni scrollowanej).
I nasz pasek postępu w działaniu.
Zapraszam Cię do kolejnego wpisu, w którym być może będziemy podróżować w przestrzeni, a nie w czasie! Do przeczytania.