Za ustvarjanje učinka klasičnega pisalnega stroja ne potrebujete JavaScripta. Naučite se, kako to storiti samo s CSS s funkcijo steps().
Cascading Style Sheets (CSS) je od svojih začetkov prehodil dolgo pot. Obstajajo stvari, ki so mogoče samo s CSS, za katere morda ne veste, zahvaljujoč nenehnemu razvoju in izboljšavam jezika.
Eden najbolj opaznih napredkov v CSS je pojav in izpopolnitev funkcij CSS, ki so znatno razširile zmožnosti in moč oblikovanja spletne vsebine.
Kaj je učinek pisalnega stroja?
Učinek pisalnega stroja je tehnika animacije besedila, ki simulira proces postopnega razkrivanja vsebine in posnema dejanje tipkanja, ko se odvija pred gledalčevimi očmi. Ta učinek spominja na pisalne stroje stare šole, zgodnje računalniške terminale oz Vmesniki ukazne vrstice (CLI).
Postopno pojavljanje besedila doda element suspenza in spletke ter spodbudi občinstvo, da bo pozorno spremljalo sporočilo, ki se odvija.
Kako deluje funkcija CSS steps().
Funkcije v CSS uvajajo stopnjo prilagodljivosti, ki jo je bilo prej težko doseči samo z uporabo statičnih slogov. The
koraki() funkcija je priljubljena funkcija, ki se uporablja v animacijah CSS. Zaradi tega je videti, da animacije napredujejo v ločenih, diskretnih korakih namesto gladkega prehoda.koraki() je funkcija za merjenje časa animacije, ki sprejme dva parametra. Prvi parameter označuje število korakov, ki jih želite opraviti z animacijo. Drugi parameter določa vedenje vsakega koraka. Sintaksa za koraki() funkcije izgleda takole:
animation-timing-function: steps(n, direction)
V zgornjem bloku kode je koraki() funkcija ima dva parametra in sicer: n in smer. The smer parameter je lahko bodisi začetek oz konec.
Nastavitev smer do začetek zagotavlja, da je prvi korak končan takoj, ko se animacija začne. Medtem ko nastavitev smer do konec bo izvedel zadnji korak, ko se animacija konča. Za ponazoritev pomembnosti koraki() funkcijo, si oglejte to kodo HTML:
<divclass="container">
<div>div>
div>
Zgornji blok kode definira a posoda div z otrokom div. Če želite, da podrejeni element div drsi po zaslonu, uporabite animacije CSS, kot je ta:
.container {
background-color: blue;
}div:not(.container) {
background-color: red;
width: 88px;
height: 88px;
animation: movebox 4sinfinite;
}
@keyframes movebox {
100% {
transform: translateX(100vw);
}
}
Zgornji blok kode uporablja @keyframes pravilo za definiranje animacije imenovan premikanje. Ta animacija se nato uporabi za podrejeni element div, zaradi česar se gladko premika po zaslonu v neskončni zanki.
prek GIPHY
Če vam ni všeč gladka animacija in želite doseči "zapletan" učinek, lahko uporabite koraki() deluje takole:
div:not(.container){
background-color: red;
width: 88px;
height: 88px;
animation: movebox 4sinfinite;
animation-timing-function: steps(10, end);
}
Kot lahko vidite v spodnjem GIF-u, ki vključuje koraki() funkcija z vrednostjo parametra 10 bo podrejeni div animirala v korakih namesto gladke animacije. Večje kot je število korakov, manj zapleta bo vaša animacija.
prek GIPHY
V zgornjem primeru je smer parameter je na voljo. Če pa izpustite smer, bo brskalnik uporabil konec kot privzeto vrednost za smer.
Ustvarjanje učinka pisalnega stroja
Zdaj, ko razumete, kako koraki() funkcija deluje, čas je, da vse, kar ste se naučili, uporabite v praksi. Ustvarite novo mapo in ji dajte ustrezno ime. V tej mapi dodajte index.htm datoteka za označevanje in a style.css datoteka za oblikovanje.
V index.htm dodajte naslednjo kodo:
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>Zgornji blok kode definira oznako za a preprosto spletno mesto HTML. Obstaja a posoda div, ki vsebuje drug div z navideznim besedilom.
Animiranje besedila
Odprite styles.css datoteko in nastavite širino posoda div na širino njegove vsebine.
.container{
width: fit-content;
}
Nato z uporabo @keyframes pravilo, definirajte animacijo, ki nadzoruje, kako animacija napreduje skozi čas. Nastavite širino na "0%" pri 0%. pri 100%, nastavite širino na "100 %" takole:
@keyframes type-text {
0% {
width: 0%;
}
100% {
width: 100%;
}
}
Nato izberite element z imenom razreda besedilo in nastavite preliv premoženje do skrit. S tem boste zagotovili, da bo besedilo ostalo skrito, dokler se učinek tipkanja ne začne. Ko to storite, zagotovite, da besedilo ostane v eni vrstici, tako da nastavite presledek premoženje do nowrap. Daj besedilo razred enoprostorne pisave in dodajte zeleno navpično obrobo na desno od besedila.
Ta obroba bo dala videz kazalca. Nastavite ustrezno velikost pisave in animacija premoženje do tip-besedilo. Na koncu dodajte še koraki() funkcijo za funkcija-časovne-animacije.
.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);
}
Ko zaženete kodo v brskalniku, bi morali videti tole:
prek GIPHY
Če želite daljši učinek tipkanja, lahko prilagodite trajanje animacije in število korakov, določenih v koraki() funkcijo.
Oživljanje kazalca
Učinek pisalnega stroja je skoraj dokončan, čeprav manjka ena funkcija, to je utripajoč kazalec. Spomnimo se, da je bil v zadnjem bloku kode na besedilu nastavljen desni rob, ki služi kot kazalec. Temu kazalcu lahko dodate animacijo z uporabo @keyframes pravilo tudi.
@keyframes cursor-blink {
0% {
border-color: transparent;
}
100% {
border-color: green;
}
}
Ko definirate animacijo po meri, dodajte ime animacije v animacija lastnina na besedilo razreda in nastavite trajanje na 0,6 sekunde.
.text{
/* Other style rules*/
animation: type-textforwards 4s,
cursor-blink.6sinfinite;
}
Zdaj, ko zaženete kodo, bi morali videti utripajoč kazalec.
prek GIPHY
Moč funkcij CSS
Funkcije CSS so spremenile način izdelave spletnih mest in vam kot razvijalcu ponudile izjemen nabor orodij. Te vsestranske funkcije omogočajo dinamično oblikovanje in interakcije, ki so bile nekoč rezervirane za kompleksne skriptne jezike.
Od barvnih manipulacij do odzivnih postavitev, animacij in kreativnih transformacij so funkcije CSS razširile možnosti spletnega oblikovanja. S funkcijami, kot je calc() za prilagodljive izračune, linear-gradient() za osupljiva ozadja in translate() za privlačne animacije, lahko ustvarite vizualno privlačne in privlačne uporabnike izkušnje.
