Nie potrzebujesz JavaScript, aby stworzyć klasyczny efekt maszyny do pisania. Dowiedz się, jak to zrobić za pomocą samego CSS, używając funkcji kroki().

Kaskadowe arkusze stylów (CSS) przeszły długą drogę od chwili ich powstania. Są rzeczy, które są możliwe dzięki CSS, o których możesz nie wiedzieć, dzięki ciągłej ewolucji i ulepszaniu języka.

Jednym z najbardziej znaczących postępów w CSS jest pojawienie się i udoskonalenie funkcji CSS, które znacznie rozszerzyły możliwości i możliwości stylizowania treści internetowych.

Jaki jest efekt maszyny do pisania?

Efekt maszyny do pisania to technika animacji tekstu, która symuluje proces stopniowego odkrywania treści, naśladując proces pisania rozwijający się na oczach widza. Efekt ten przypomina oldschoolowe maszyny do pisania, wczesne terminale komputerowe lub Interfejsy wiersza poleceń (CLI).

Stopniowe pojawianie się tekstu wprowadza element napięcia i intrygi, zachęcając widza do uważnego obserwowania rozwijającego się przekazu.

Jak działa funkcja kroki() CSS

instagram viewer

Funkcje w CSS wprowadzają poziom elastyczności, który wcześniej był trudny do osiągnięcia przy użyciu samych stylów statycznych. The kroki() funkcja jest popularną funkcją używaną w animacjach CSS. Dzięki temu animacje wyglądają, jakby rozwijały się w wyraźnych, dyskretnych krokach, zamiast płynnie przechodzić.

kroki() to funkcja synchronizacji animacji, która przyjmuje dwa parametry. Pierwszy parametr oznacza liczbę kroków, jakie ma wykonać animacja. Drugi parametr określa zachowanie każdego kroku. Składnia dla kroki() funkcje wyglądają tak:

animation-timing-function: steps(n, direction)

W powyższym bloku kodu plik kroki() funkcja ma dwa parametry, a mianowicie: N I kierunek. The kierunek parametr może być początek Lub koniec.

Ustawianie kierunek Do początek gwarantuje, że pierwszy krok zostanie ukończony natychmiast po rozpoczęciu animacji. Natomiast ustawienie kierunek Do koniec wykona ostatni krok po zakończeniu animacji. Aby zilustrować znaczenie kroki() funkcji, spójrz na następujący kod HTML:

<divclass="container">
<div>div>
div>

Powyższy blok kodu definiuje a pojemnik div z div podrzędnym. Jeśli chcesz, aby element div dziecka przesuwał się po ekranie, użyj animacji CSS w następujący sposób:

.container {
background-color: blue;
}
div:not(.container) {
background-color: red;
width: 88px;
height: 88px;
animation: movebox 4sinfinite;
}
@keyframes movebox {
 100% {
transform: translateX(100vw);
 }
}

Powyższy blok kodu wykorzystuje Reguła @keyframes definiująca animację o imieniu pole przenoszenia. Ta animacja jest następnie stosowana do podrzędnego elementu div, powodując jego płynne poruszanie się po ekranie w nieskończonej pętli.

za pośrednictwem GIPHY

Jeśli nie lubisz płynnej animacji i chcesz uzyskać efekt „chropowaty”, możesz skorzystać z opcji kroki() działać tak:

div:not(.container){
background-color: red;
width: 88px;
height: 88px;
animation: movebox 4sinfinite;
animation-timing-function: steps(10, end);
}

Jak widać na poniższym GIF-ie, zawierającym kroki() Funkcja z wartością parametru 10 będzie animować element podrzędny div krokami, zamiast płynnej animacji. Im większa liczba kroków, tym mniej niestabilna będzie animacja.

za pośrednictwem GIPHY

W powyższym przykładzie kierunek podany jest parametr. Jeśli jednak pominiesz kierunek, będzie używana przeglądarka koniec jako wartość domyślna dla kierunek.

Tworzenie efektu maszyny do pisania

Teraz, gdy już rozumiesz, jak kroki() funkcja działa, czas zastosować wszystko, czego się nauczyłeś, w praktyce. Utwórz nowy folder i nadaj mu odpowiednią nazwę. W tym folderze dodaj plik indeks.htm plik ze znacznikami i a styl.css plik do stylizacji.

w indeks.htm pliku, dodaj następujący kod standardowy:

html>
<htmllang="en">
<head>
<metacharset="UTF-8" />
<metaname="viewport"content="width=device-width, initial-scale=1.0" />
<title>Documenttitle>
<linkrel="stylesheet"href="style.css" />
head>
<body>
<divclass="container">
<divclass="text">
 Lorem ipsum dolor sit amet consectetur 
 adipisicing elit. Reiciendis, tempore! 
div>
div>
body>
html>

Powyższy blok kodu definiuje znaczniki dla a prosta witryna HTML. Tam jest pojemnik div, który zawiera inny div z jakimś fikcyjnym tekstem.

Animacja tekstu

Otworzyć style.css plik i ustaw szerokość pliku pojemnik div na szerokość jego zawartości.

.container{
width: fit-content;
}

Następnie za pomocą @klatki kluczowe reguły zdefiniuj animację kontrolującą przebieg animacji w czasie. Ustaw szerokość na „0%” w 0%. Na 100%, ustaw szerokość na „100%” w następujący sposób:

@keyframes type-text {
 0% {
width: 0%;
 }
 100% {
width: 100%;
 }
}

Następnie wybierz element z nazwą klasy tekst i ustaw przelewowy własność do ukryty. Dzięki temu tekst pozostanie ukryty, dopóki nie zacznie się efekt pisania. Po wykonaniu tej czynności upewnij się, że tekst pozostaje w jednej linii, ustawiając opcję Biała przestrzeń własność do teraz rapuj. Dać tekst klasycz czcionkę o stałej szerokości i dodaj zieloną pionową ramkę po prawej stronie tekstu.

Ta ramka będzie wyglądać jak kursor. Ustaw odpowiednie rozmiar czcionki i animacja własność do Wpisz tekst. Na koniec dodaj kroki() funkcję do funkcja synchronizacji animacji.

.text {
overflow: hidden;
white-space: nowrap;
font-family: "CourierNew", Courier, monospace;
border-right: solid 10pxgreen;
font-size: 23px;
animation: type-textforwards 4s;
animation-timing-function: steps(40);
}

Po uruchomieniu kodu w przeglądarce powinieneś zobaczyć następujący widok:

za pośrednictwem GIPHY

Jeśli chcesz uzyskać dłuższy efekt pisania, możesz dostosować czas trwania animacji i liczbę kroków określoną w opcji kroki() funkcjonować.

Ożywienie kursora

Efekt maszyny do pisania jest prawie ukończony, chociaż brakuje jednej funkcji, a mianowicie migającego kursora. Przypomnijmy, że w ostatnim bloku kodu ustawiono prawą ramkę tekstu, która miała służyć jako kursor. Możesz dodać animację do tego kursora za pomocą @klatki kluczowe rządzić również.

@keyframes cursor-blink {
 0% {
border-color: transparent;
 }
 100% {
border-color: green;
 }
}

Po zdefiniowaniu niestandardowej animacji dodaj nazwę animacji do pliku animacja nieruchomość na tekst class i ustaw czas trwania na 0,6 sekundy.

.text{
/* Other style rules*/
animation: type-textforwards 4s,
cursor-blink.6sinfinite;
}

Teraz po uruchomieniu kodu powinieneś zobaczyć migający kursor.

za pośrednictwem GIPHY

Potęga funkcji CSS

Funkcje CSS zrewolucjonizowały sposób tworzenia stron internetowych, oferując programistom niezwykły zestaw narzędzi. Te wszechstronne funkcje umożliwiają dynamiczną stylizację i interakcje, które kiedyś były zarezerwowane dla złożonych języków skryptowych.

Od manipulacji kolorami po responsywne układy, animacje i kreatywne transformacje, funkcje CSS rozszerzyły możliwości projektowania stron internetowych. Dzięki funkcjom takim jak calc() do elastycznych obliczeń, linear-gradient() do tworzenia oszałamiających tła i Translation() do urzekających animacji, możesz stworzyć atrakcyjne wizualnie i angażujące użytkownika doświadczenie.