Klassikalise kirjutusmasinaefekti loomiseks pole JavaScripti vaja. Siit saate teada, kuidas seda teha ainult CSS-iga, kasutades funktsiooni Steps().

Cascading Style Sheets (CSS) on selle loomisest saadik teinud pika tee. Tänu keele pidevale arengule ja täiustamisele on asju, mis on võimalikud ainult CSS-iga, millest te ei pruugi teada.

Üks tähelepanuväärsemaid edusamme CSS-is on CSS-i funktsioonide esilekerkimine ja täiustamine, mis on oluliselt laiendanud veebisisu kujundamise võimalusi ja võimsust.

Mis on kirjutusmasina efekt?

Kirjutusmasinaefekt on tekstianimatsiooni tehnika, mis simuleerib järk-järgult sisu avaldamise protsessi, jäljendades trükkimist, kui see vaataja silme all lahti rullub. See efekt meenutab vana kooli kirjutusmasinaid, varajasi arvutiterminale või Käsurea liidesed (CLI-d).

Teksti järkjärguline ilmumine lisab põnevuse ja intriigi elementi, ärgitades publikut rulluvale sõnumile tähelepanelikult tähelepanu pöörama.

Kuidas CSS-i Steps() funktsioon töötab

CSS-i funktsioonid pakuvad paindlikkust, mida oli varem keeruline saavutada, kasutades ainult staatilisi stiile. The

sammud() Funktsioon on populaarne funktsioon, mida kasutatakse CSS-animatsioonides. See muudab animatsioonid sujuvaks üleminekuks justkui selgeks, eraldiseisvate sammudega.

sammud() on animatsiooni ajastusfunktsioon, mis võtab sisse kaks parameetrit. Esimene parameeter tähistab sammude arvu, mida soovite animatsioonil teha. Teine parameeter määrab iga sammu käitumise. Süntaks jaoks sammud() funktsioonid näevad välja sellised:

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

Ülaltoodud koodiplokis on sammud() funktsioonil on kaks parameetrit, nimelt: n ja suunas. The suunas parameeter võib olla kumbki alustada või lõpp.

Seadistades suunas juurde alustada tagab, et esimene samm on lõpule viidud niipea, kui animatsioon algab. Seades aga suunas juurde lõpp käivitab animatsiooni lõppedes viimase sammu. Et illustreerida selle tähtsust sammud() funktsiooni, vaadake järgmist HTML-koodi:

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

Ülaltoodud koodiplokk määratleb a konteiner div lapsega div. Kui soovite, et alamdiv libiseks üle ekraani, kasutage selliseid CSS-animatsioone:

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

Ülaltoodud koodiplokk kasutab @keyframes reegel animatsiooni määratlemiseks nimega liigukast. Seda animatsiooni rakendatakse seejärel alam-divis, mis paneb selle sujuvalt üle ekraani lõputu tsüklina liikuma.

GIPHY kaudu

Kui teile ei meeldi sujuv animatsioon ja soovite saavutada "hakkivat" efekti, võite kasutada sammud() toimib nii:

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

Nagu näete alloleval GIF-il, sisaldab see sammud() funktsioon parameetri väärtusega 10 animeerib sujuva animatsiooni asemel alam-div-i sammude kaupa. Mida suurem on sammude arv, seda vähem katkendlik teie animatsioon välja näeb.

GIPHY kaudu

Ülaltoodud näites on suunas parameeter on ette nähtud. Kui aga jätate vahele suunas, kasutab brauser lõpp kui vaikeväärtus suunas.

Kirjutusmasina efekti loomine

Nüüd, kui saate aru, kuidas sammud() funktsioon töötab, on aeg kõike õpitut praktikas rakendada. Looge uus kaust ja andke sellele sobiv nimi. Lisage sellesse kausta an index.htm faili märgistamiseks ja a stiil.css Fail stiilimiseks.

Aastal index.htm faili, lisage järgmine standardkood:

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>

Ülaltoodud koodiplokk määrab a märgistuse lihtne HTML veebisait. Siin on konteiner div, mis sisaldab teist div koos näiva tekstiga.

Teksti animeerimine

Ava stiilid.css faili ja määrake laius konteiner div selle sisu laiusele.

.container{
width: fit-content;
}

Järgmiseks, kasutades @keyframes reegli järgi määratlege animatsioon, mis juhib animatsiooni edenemist aja jooksul. Seadke laiuseks "0%" juures 0%. Kell 100%, määrake laiuseks "100%" järgmiselt:

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

Järgmisena valige element klassi nimega tekst ja määrake ülevool vara juurde peidetud. See tagab, et tekst jääb peidetuks seni, kuni tippimisefekt pole alanud. Pärast seda veenduge, et tekst jääks ühele reale, määrates tühik vara juurde nowrap. Andke tekst klassi monospace font ja lisage tekstist paremale roheline vertikaalne ääris.

See ääris annab kursori välimuse. Määra sobiv fondi suurus ja animatsioon vara juurde tüüp-tekst. Lõpuks lisage sammud() funktsiooni juurde animatsiooni-ajastamise-funktsioon.

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

Kui käivitate koodi brauseris, peaksite nägema järgmist:

GIPHY kaudu

Kui soovite pikemat tippimisefekti, saate reguleerida animatsiooni kestust ja sammude arvu, mis on määratud sammud() funktsiooni.

Kursori ellu äratamine

Kirjutusmasina efekt on peaaegu valmis, kuigi puudub üks funktsioon, milleks on vilkuv kursor. Tuletage meelde, et viimases koodiplokis määrati tekstile parempoolne ääris, mis toimiks kursorina. Sellele kursorile saate lisada animatsiooni, kasutades nuppu @keyframes reegel samuti.

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

Pärast kohandatud animatsiooni määratlemist lisage animatsiooni nimi animatsioon kinnistul tekst klassi ja määrake kestuseks 0,6 sekundit.

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

Nüüd, kui käivitate koodi, peaksite nägema vilkuvat kursorit.

GIPHY kaudu

CSS-i funktsioonide jõud

CSS-i funktsioonid on muutnud veebisaitide loomise viisi, pakkudes teile kui arendajale tähelepanuväärset tööriistakomplekti. Need mitmekülgsed funktsioonid võimaldavad dünaamilist stiili ja interaktsioone, mis olid kunagi reserveeritud keerukate skriptikeelte jaoks.

CSS-i funktsioonid on avardanud veebidisaini võimalusi alates värvide manipuleerimisest kuni reageerivate paigutuste, animatsioonide ja loominguliste teisendusteni. Funktsioonidega nagu calc() paindlike arvutuste jaoks, linear-gradient() vapustava tausta jaoks ja Translate() köitvate animatsioonide jaoks saate luua visuaalselt atraktiivse ja kaasahaarava kasutaja kogemusi.