Od momentu powstania, kaskadowe arkusze stylów (CSS) przeszły znaczącą metamorfozę. Dzięki ciągłemu rozwojowi i udoskonalaniu tego języka, obecnie możliwe jest osiągnięcie efektów, o których w przeszłości można było tylko pomarzyć.
Jednym z najbardziej przełomowych osiągnięć w CSS jest wprowadzenie i udoskonalenie funkcji, które znacznie poszerzyły zakres możliwości stylizowania treści internetowych.
Na czym polega efekt maszyny do pisania?
Efekt maszyny do pisania to technika animowania tekstu, która imituje proces stopniowego ujawniania treści. Przypomina ona sposób, w jaki tekst pojawiał się na starych maszynach do pisania, wczesnych terminalach komputerowych czy interfejsach wiersza poleceń (CLI).
Stopniowe pojawianie się tekstu wprowadza element zaskoczenia i intrygi, skupiając uwagę odbiorcy na rozwijającej się treści.
Jak działa funkcja `steps()` w CSS?
Funkcje w CSS wprowadzają elastyczność, która wcześniej była trudno osiągalna przy użyciu tylko statycznych stylów. Funkcja `steps()` jest często wykorzystywana w animacjach CSS. Dzięki niej animacje nie przebiegają płynnie, lecz rozwijają się skokowo, w wyraźnych, oddzielnych krokach.
`steps()` to funkcja synchronizacji animacji, która przyjmuje dwa parametry. Pierwszy parametr określa liczbę kroków animacji, a drugi – zachowanie każdego z tych kroków. Składnia funkcji `steps()` wygląda następująco:
animation-timing-function: steps(n, direction)
W powyższym fragmencie kodu, funkcja `steps()` ma dwa parametry: `n` i `direction`. Parametr `direction` może przyjmować wartości `start` lub `end`.
Ustawienie `direction` na `start` sprawia, że pierwszy krok animacji następuje od razu po jej rozpoczęciu. Natomiast ustawienie `direction` na `end` powoduje wykonanie ostatniego kroku dopiero po zakończeniu całej animacji. Aby lepiej zobrazować działanie funkcji `steps()`, spójrzmy na następujący kod HTML:
<div class="container"> <div></div> </div>
Powyższy kod definiuje element `div` pełniący rolę kontenera, zawierający w sobie drugi element `div`. Jeżeli chcemy, aby element potomny poruszał się po ekranie, możemy wykorzystać animację CSS w następujący sposób:
.container {
background-color: blue;
}
div:not(.container) {
background-color: red;
width: 88px;
height: 88px;
animation: movebox 4s infinite;
}
@keyframes movebox {
100% {
transform: translateX(100vw);
}
}
W powyższym fragmencie kodu, reguła `@keyframes` definiuje animację o nazwie `movebox`. Ta animacja jest następnie zastosowana do elementu potomnego `div`, co powoduje jego płynne przesuwanie się po ekranie w nieskończonej pętli.
Jeśli preferujemy animację skokową, zamiast płynnej, możemy użyć funkcji `steps()` w następujący sposób:
div:not(.container){
background-color: red;
width: 88px;
height: 88px;
animation: movebox 4s infinite;
animation-timing-function: steps(10, end);
}
Jak widać na załączonym GIF-ie, użycie funkcji `steps()` z parametrem o wartości 10 sprawi, że animacja elementu potomnego `div` będzie wykonywana skokowo, zamiast płynnie. Im większa liczba kroków, tym mniej skokowa będzie animacja.
W powyższym przykładzie parametr kierunku został podany jawnie. Jeżeli jednak go pominiemy, przeglądarka domyślnie użyje wartości `end`.
Tworzenie efektu maszyny do pisania
Teraz, gdy już rozumiemy, jak działa funkcja `steps()`, możemy wykorzystać zdobytą wiedzę w praktyce. Utwórzmy nowy folder i nadajmy mu odpowiednią nazwę. W tym folderze dodajmy plik `index.htm` dla struktury HTML oraz plik `style.css` dla stylów CSS.
W pliku `index.htm` umieśćmy następujący, standardowy kod:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="https://wilku.top/how-to-create-a-typewriter-effect-with-css/style.css" />
</head>
<body>
<div class="container">
<div class="text">
Lorem ipsum dolor sit amet consectetur
adipisicing elit. Reiciendis, tempore!
</div>
</div>
</body>
</html>
Powyższy kod definiuje prostą strukturę strony HTML. Mamy element `div` pełniący rolę kontenera, w którym znajduje się kolejny `div` z przykładowym tekstem.
Animowanie tekstu
Otwórzmy plik `style.css` i ustawmy szerokość elementu `div` o klasie `container` na szerokość jego zawartości.
.container{
width: fit-content;
}
Następnie, za pomocą reguły `@keyframes`, zdefiniujmy animację, która będzie kontrolować proces animowania tekstu. Ustawmy szerokość na „0%” przy 0% animacji, a przy 100% ustawmy szerokość na „100%”.
@keyframes type-text {
0% {
width: 0%;
}
100% {
width: 100%;
}
}
Teraz wybierzmy element z klasą `text` i ustawmy jego właściwość `overflow` na `hidden`. Spowoduje to ukrycie tekstu do momentu rozpoczęcia animacji pisania. Dodatkowo, aby tekst pozostał w jednej linii, ustawmy właściwość `white-space` na `nowrap`. Nadajmy klasie `text` czcionkę o stałej szerokości oraz dodajmy zieloną, pionową ramkę po prawej stronie tekstu.
Ta ramka będzie pełniła funkcję kursora. Ustawmy odpowiedni rozmiar czcionki i dodajmy animację `type-text`. Na koniec, użyjmy funkcji `steps()` do ustawienia funkcji synchronizacji animacji.
.text {
overflow: hidden;
white-space: nowrap;
font-family: "Courier New", Courier, monospace;
border-right: solid 10px green;
font-size: 23px;
animation: type-text forwards 4s;
animation-timing-function: steps(40);
}
Po uruchomieniu kodu w przeglądarce, powinniśmy zobaczyć animowany tekst, tworzący efekt pisania.
Aby uzyskać dłuższy efekt pisania, możemy dostosować czas trwania animacji i liczbę kroków w funkcji `steps()`.
Ożywienie kursora
Efekt maszyny do pisania jest prawie gotowy, brakuje jeszcze jednej ważnej funkcji – migającego kursora. Pamiętamy, że w poprzednim kodzie ustawiliśmy ramkę po prawej stronie tekstu, która miała pełnić rolę kursora. Teraz możemy dodać do niego animację, również za pomocą reguły `@keyframes`.
@keyframes cursor-blink {
0% {
border-color: transparent;
}
100% {
border-color: green;
}
}
Po zdefiniowaniu animacji `cursor-blink`, dodajmy jej nazwę do właściwości `animation` w klasie `text` i ustawmy czas trwania na 0.6 sekundy.
.text{
animation: type-text forwards 4s,
cursor-blink .6s infinite;
}
Teraz, po ponownym uruchomieniu kodu, powinniśmy zobaczyć migający kursor.
Potęga funkcji CSS
Funkcje CSS zrewolucjonizowały tworzenie stron internetowych, dając programistom potężny zestaw narzędzi. Te wszechstronne funkcje umożliwiają dynamiczne stylowanie i interakcje, które wcześniej były domeną zaawansowanych języków skryptowych.
Od manipulacji kolorami po responsywne układy, animacje i kreatywne transformacje – funkcje CSS znacznie poszerzyły zakres możliwości projektowania stron internetowych. Dzięki funkcjom takim jak `calc()` do elastycznych obliczeń, `linear-gradient()` do tworzenia efektownych teł czy `transform()` do ciekawych animacji, możemy tworzyć atrakcyjne i wciągające interfejsy użytkownika.