Na vytvorenie efektu klasického písacieho stroja nepotrebujete JavaScript. Naučte sa, ako to urobiť iba pomocou CSS pomocou funkcie steps().

Cascading Style Sheets (CSS) prešlo od svojho vzniku dlhú cestu. Sú veci, ktoré sú možné len s CSS, o ktorých ste možno nevedeli, vďaka neustálemu vývoju a zdokonaľovaniu jazyka.

Jedným z najpozoruhodnejších pokrokov v CSS je vznik a zdokonalenie funkcií CSS, ktoré výrazne rozšírili možnosti a silu stylingu webového obsahu.

Aký je efekt písacieho stroja?

Efekt písacieho stroja je technika animácie textu, ktorá simuluje proces postupného odhaľovania obsahu a napodobňuje akt písania, ktorý sa odohráva pred očami diváka. Tento efekt pripomína staré písacie stroje, rané počítačové terminály, príp Rozhrania príkazového riadka (CLI).

Postupné objavovanie sa textu pridáva prvok napätia a intríg, čím povzbudzuje publikum, aby venovalo veľkú pozornosť odvíjajúcemu sa posolstvu.

Ako funguje funkcia CSS steps().

Funkcie v CSS zavádzajú úroveň flexibility, ktorú bolo predtým náročné dosiahnuť použitím samotných statických štýlov. The

instagram viewer
kroky() funkcia je populárna funkcia, ktorá sa používa v animáciách CSS. Vďaka tomu animácie vyzerajú, akoby napredovali v zreteľných, diskrétnych krokoch namiesto plynulého prechodu.

kroky() je funkcia časovania animácie, ktorá má dva parametre. Prvý parameter označuje počet krokov, ktoré má vaša animácia vykonať. Druhý parameter definuje správanie každého kroku. Syntax pre kroky() funkcie vyzera takto:

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

Vo vyššie uvedenom bloku kódu je kroky() funkcia má dva parametre a to: n a smer. The smer parameter môže byť buď začať alebo koniec.

Nastavenie smer do začať zabezpečuje, že prvý krok je dokončený hneď po spustení animácie. Zatiaľ čo nastavenie smer do koniec po dokončení animácie sa spustí posledný krok. Na ilustráciu dôležitosti kroky() funkciu, pozrite si nasledujúci HTML kód:

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

Vyššie uvedený blok kódu definuje a kontajner div s dieťaťom div. Ak chcete, aby sa podriadený div kĺzal po obrazovke, použite animácie CSS takto:

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

Vyššie uvedený blok kódu využíva @keyframes pravidlo na definovanie animácie pomenovaný movebox. Táto animácia sa potom aplikuje na podradený div, čo spôsobí, že sa bude plynulo pohybovať po obrazovke v nekonečnej slučke.

cez GIPHY

Ak sa vám nepáči plynulá animácia a chcete dosiahnuť "trhaný" efekt, môžete použiť kroky() fungovať takto:

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

Ako môžete vidieť na nižšie uvedenom GIF, ktorý obsahuje kroky() funkcia s hodnotou parametra 10 bude animovať podriadený div v krokoch namiesto plynulej animácie. Čím vyšší počet krokov, tým menej trhaná bude vaša animácia.

cez GIPHY

Vo vyššie uvedenom príklade je smer je poskytnutý parameter. Ak však vynecháte smer, prehliadač použije koniec ako predvolená hodnota pre smer.

Vytvorenie efektu písacieho stroja

Teraz, keď ste pochopili, ako kroky() funkcia funguje, je čas uviesť všetko, čo ste sa naučili, do praxe. Vytvorte nový priečinok a dajte mu vhodný názov. V tomto priečinku pridajte súbor index.htm súbor na označenie a a style.css súbor na styling.

V index.htm súbor, pridajte nasledujúci štandardný kód:

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>

Vyššie uvedený blok kódu definuje označenie pre a jednoduchý HTML web. Existuje a kontajner div, ktorý obsahuje ďalší div s nejakým fiktívnym textom.

Animácia textu

Otvor styles.css súbor a nastavte šírku súboru kontajner div na šírku jeho obsahu.

.container{
width: fit-content;
}

Ďalej pomocou @kľúčové snímky pravidlo, definujte animáciu, ktorá riadi priebeh animácie v priebehu času. Nastavte šírku na „0 %“. 0%. o 100%, nastavte šírku na "100 %" takto:

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

Ďalej vyberte prvok s názvom triedy text a nastavte pretečeniu majetok do skryté. Zabezpečíte tým, že text zostane skrytý, kým sa nezačne písať. Potom sa uistite, že text zostane na jednom riadku nastavením Biely vesmír majetok do nowrap. Dajte text trieda jednopriestorové písmo a pridajte zelené zvislé orámovanie napravo od textu.

Toto ohraničenie bude vyzerať ako kurzor. Nastavte vhodné veľkosť písma a animácie majetok do typ-text. Nakoniec pridajte kroky() funkciu k funkcia animácie-časovania.

.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);
}

Keď spustíte kód v prehliadači, mali by ste vidieť toto:

cez GIPHY

Ak chcete dlhší efekt písania, môžete upraviť trvanie animácie a počet krokov špecifikovaných v kroky() funkciu.

Oživenie kurzora

Efekt písacieho stroja je takmer dokončený, aj keď chýba jedna funkcia, ktorou je blikajúci kurzor. Pripomeňme, že v poslednom bloku kódu bolo na texte nastavené pravé orámovanie, ktoré slúžilo ako kurzor. K tomuto kurzoru môžete pridať animáciu pomocou @kľúčové snímky vládnuť tiež.

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

Po definovaní vlastnej animácie pridajte názov animácie do súboru animácie nehnuteľnosť na text triedy a nastavte trvanie na 0,6 sekundy.

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

Teraz, keď spustíte kód, mali by ste vidieť blikajúci kurzor.

cez GIPHY

Sila funkcií CSS

Funkcie CSS spôsobili revolúciu v spôsobe vytvárania webových stránok a ponúkajú vám ako vývojárovi pozoruhodnú súpravu nástrojov. Tieto všestranné funkcie umožňujú dynamický štýl a interakcie, ktoré boli kedysi vyhradené pre zložité skriptovacie jazyky.

Od manipulácií s farbami po responzívne rozloženia, animácie a kreatívne transformácie, funkcie CSS rozšírili možnosti webového dizajnu. S funkciami ako calc() pre flexibilné výpočty, lineárny gradient() pre úžasné pozadia a translate() pre podmanivé animácie, môžete vytvoriť vizuálne príťažlivého a pútavého používateľa skúsenosti.