Et tarvitse JavaScriptiä klassisen kirjoituskonetehosteen luomiseen. Opi tekemään se pelkällä CSS: llä Step()-funktion avulla.

CSS (Cascading Style Sheets) on kulkenut pitkän tien perustamisestaan ​​lähtien. On asioita, jotka ovat mahdollisia pelkällä CSS: llä, joista et ehkä tiedä kielen jatkuvan kehityksen ja parantumisen ansiosta.

Yksi CSS: n merkittävimmistä edistysaskeleista on CSS-toimintojen ilmaantuminen ja jalostaminen, jotka ovat merkittävästi laajentaneet verkkosisällön muotoilun ominaisuuksia ja tehoa.

Mikä on kirjoituskoneefekti?

Kirjoituskonetehoste on tekstianimaatiotekniikka, joka simuloi prosessia, jossa sisältö paljastetaan asteittain ja jäljittelee kirjoittamista, kun se avautuu katsojan silmien eteen. Tämä efekti muistuttaa vanhan koulun kirjoituskoneita, varhaisia ​​tietokonepäätteitä tai Command Line Interfaces (CLI: t).

Tekstin asteittainen ilmaantuminen lisää jännitystä ja juonittelua, mikä rohkaisee yleisön kiinnittämään huomiota avautuvaan sanomaan.

Kuinka CSS steps() -funktio toimii

instagram viewer

CSS: n toiminnot tuovat joustavuutta, joka oli aiemmin haastavaa saavuttaa käyttämällä pelkästään staattisia tyylejä. The askeleet() Funktio on suosittu toiminto, jota käytetään CSS-animaatioissa. Se saa animaatiot näyttämään siltä, ​​että ne etenevät erillisinä, erillisinä vaiheina sujuvan siirtymisen sijaan.

askeleet() on animaation ajoitustoiminto, joka ottaa kaksi parametria. Ensimmäinen parametri ilmaisee vaiheiden määrän, jonka haluat animaation suorittavan. Toinen parametri määrittää kunkin vaiheen käyttäytymisen. Syntaksi kohteelle askeleet() toiminnot näyttävät tältä:

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

Yllä olevassa koodilohkossa askeleet() funktiolla on kaksi parametria, nimittäin: n ja suunta. The suunta parametri voi olla kumpi tahansa alkaa tai loppu.

Asetetaan suunta to alkaa varmistaa, että ensimmäinen vaihe suoritetaan heti animaation alkaessa. Sitä vastoin asettamalla suunta to loppu suorittaa viimeisen vaiheen animaation päättyessä. Havainnollistaakseen sen tärkeyttä askeleet() toimintoa, katso seuraavaa HTML-koodia:

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

Yllä oleva koodilohko määrittää a kontti div lapsen kanssa div. Jos haluat, että lapsi-div liukuu näytöllä, käytä CSS-animaatioita seuraavasti:

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

Yllä oleva koodilohko käyttää @keyframes-sääntö animaation määrittämiseksi nimetty Movebox. Tätä animaatiota sovelletaan sitten lapsidiv: iin, jolloin se liikkuu sujuvasti näytöllä äärettömässä silmukassa.

GIPHY: n kautta

Jos et pidä sujuvasta animaatiosta ja haluat saavuttaa "katkoilevan" vaikutuksen, voit käyttää askeleet() toimi näin:

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

Kuten näet alla olevasta GIF-tiedostosta, joka sisältää askeleet() funktio parametriarvolla 10 animoi alidiv: n vaiheittain tasaisen animaation sijaan. Mitä suurempi vaiheiden määrä, sitä vähemmän katkonainen animaatiosi näyttää.

GIPHY: n kautta

Yllä olevassa esimerkissä suunta parametri tarjotaan. Jos kuitenkin jätät väliin suunta, selain käyttää loppu oletusarvona kohteelle suunta.

Kirjoituskonetehosteen luominen

Nyt kun ymmärrät kuinka askeleet() toiminto toimii, on aika laittaa kaikki oppimasi käytäntöön. Luo uusi kansio ja anna sille sopiva nimi. Lisää kyseiseen kansioon an index.htm merkintätiedosto ja a tyyli.css tiedosto muotoilua varten.

Vuonna index.htm tiedosto, lisää seuraava yleiskoodi:

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>

Yllä oleva koodilohko määrittää merkinnän a: lle yksinkertainen HTML-sivusto. Tuolla on kontti div, jossa on toinen div, jossa on tyhjää tekstiä.

Tekstin animointi

Avaa styles.css tiedosto ja aseta tiedoston leveys kontti div sisällön leveydelle.

.container{
width: fit-content;
}

Seuraavaksi käyttämällä @keyframes sääntö, määritä animaatio, joka ohjaa animaation etenemistä ajan myötä. Aseta leveydeksi "0%" klo 0%. klo 100%, aseta leveydeksi "100%" seuraavasti:

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

Valitse seuraavaksi elementti luokan nimellä teksti ja aseta ylivuoto omaisuutta piilotettu. Näin varmistat, että teksti pysyy piilossa niin kauan kuin kirjoitustehoste ei ole alkanut. Tämän jälkeen varmista, että teksti pysyy yhdellä rivillä asettamalla välilyönti omaisuutta nowrap. Anna teksti luokittele monospace-fontti ja lisää vihreä pystyreuna tekstin oikealle puolelle.

Tämä reunus antaa kohdistimen vaikutelman. Aseta sopiva Fonttikoko ja animaatio omaisuutta tyyppi-teksti. Lisää lopuksi askeleet() toimintoa animaatio-ajoitus-toiminto.

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

Kun suoritat koodin selaimessa, sinun pitäisi nähdä tämä:

GIPHY: n kautta

Jos haluat pidemmän kirjoitustehosteen, voit säätää animaation kestoa ja vaiheiden määrää, jotka on määritetty kohdassa askeleet() toiminto.

Kohdistimen herättäminen henkiin

Kirjoituskonetehoste on melkein valmis, vaikka yksi puuttuva ominaisuus on vilkkuva kursori. Muista, että viimeisessä koodilohkossa tekstille asetettiin oikeanpuoleinen reunus toimimaan kohdistimena. Voit lisätä animaation tähän kursoriin käyttämällä @keyframes sääntö myös.

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

Kun olet määrittänyt mukautetun animaation, lisää animaation nimi animaatio omaisuutta teksti luokkaa ja aseta kestoksi 0,6 sekuntia.

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

Nyt kun suoritat koodin, sinun pitäisi nähdä vilkkuva kohdistin.

GIPHY: n kautta

CSS-toimintojen voima

CSS-toiminnot ovat mullistaneet verkkosivustojen rakentamisen ja tarjoavat sinulle kehittäjänä merkittävän työkalupakin. Nämä monipuoliset toiminnot mahdollistavat dynaamisen muotoilun ja vuorovaikutuksen, joka oli aiemmin varattu monimutkaisille komentosarjakielille.

CSS-toiminnot ovat laajentaneet verkkosuunnittelun mahdollisuuksia värimanipulaatioista reagoiviin asetteluihin, animaatioihin ja luoviin muunnoksiin. Funktioilla, kuten calc() joustavia laskutoimituksia varten, linear-gradient() upeita taustoja varten ja translate() vangitsevia animaatioita varten, voit luoda visuaalisesti houkuttelevan ja kiinnostavan käyttäjän kokemukset.