Non hai bisogno di JavaScript per creare il classico effetto macchina da scrivere. Scopri come farlo solo con CSS utilizzando la funzione passaggi().

I Cascading Style Sheets (CSS) hanno fatto molta strada sin dal loro inizio. Ci sono cose possibili solo con i CSS di cui potresti non essere a conoscenza, grazie alla continua evoluzione e miglioramento del linguaggio.

Uno dei progressi più notevoli nei CSS è l'emergere e il perfezionamento delle funzioni CSS, che hanno notevolmente ampliato le capacità e la potenza dello styling dei contenuti web.

Qual è l'effetto macchina da scrivere?

L'effetto macchina da scrivere è una tecnica di animazione del testo che simula il processo di svelamento progressivo del contenuto, imitando l'atto della digitazione mentre si svolge davanti agli occhi dello spettatore. Questo effetto ricorda le macchine da scrivere della vecchia scuola, i primi terminali di computer o Interfacce della riga di comando (CLI).

La comparsa graduale del testo aggiunge un elemento di suspense e intrigo, incoraggiando il pubblico a prestare molta attenzione al messaggio che si svolge.

instagram viewer

Come funziona la funzione CSSsteps()

Le funzioni nei CSS introducono un livello di flessibilità che in precedenza era difficile da ottenere utilizzando solo gli stili statici. IL passi() La funzione è una funzione popolare utilizzata nelle animazioni CSS. Fa sembrare che le animazioni stiano avanzando in passaggi distinti e discreti invece di passare in modo fluido.

passi() è una funzione di temporizzazione dell'animazione che accetta due parametri. Il primo parametro indica il numero di passaggi che vuoi che esegua l'animazione. Il secondo parametro definisce il comportamento di ogni passaggio. La sintassi per passi() le funzioni assomigliano a questa:

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

Nel blocco di codice sopra, il file passi() la funzione ha due parametri e cioè: N E direzione. IL direzione il parametro può essere inizio O FINE.

Impostazione del direzione A inizio garantisce che il primo passaggio venga completato non appena inizia l'animazione. Considerando che, impostando il direzione A FINE eseguirà l'ultimo passaggio al termine dell'animazione. Per illustrare l'importanza del passi() funzione, dai un'occhiata al seguente codice HTML:

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

Il blocco di codice sopra definisce a contenitore div con un bambino div. Se vuoi che il div figlio scivoli sullo schermo, utilizza animazioni CSS come queste:

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

Il blocco di codice sopra utilizza il file Regola @keyframes per definire un'animazione di nome movebox. Questa animazione viene quindi applicata al div figlio, facendolo muovere uniformemente sullo schermo in un ciclo infinito.

tramite GIPHY

Se non ti piacciono le animazioni fluide e desideri ottenere un effetto "instabile", puoi utilizzare il file passi() funzionare in questo modo:

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

Come puoi vedere nella GIF qui sotto, incorporando il file passi() La funzione con un valore del parametro pari a 10 animerà il div figlio in passaggi anziché in un'animazione fluida. Maggiore è il numero di passaggi, meno discontinua apparirà l'animazione.

tramite GIPHY

Nell'esempio sopra, il direzione viene fornito il parametro Tuttavia, se si omette il file direzione, il browser utilizzerà FINE come valore predefinito per direzione.

Creazione dell'effetto macchina da scrivere

Ora che hai capito come funziona il passi() funziona, è tempo di mettere in pratica tutto ciò che hai imparato. Crea una nuova cartella e assegnale un nome appropriato. In quella cartella, aggiungi un file indice.htm file per il markup e a style.css file per lo styling.

Nel indice.htm file, aggiungere il seguente codice boilerplate:

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>

Il blocco di codice sopra definisce il markup per a semplice sito web HTML. C'è un contenitore div che contiene un altro div con del testo fittizio.

Animare il testo

Apri il stili.css file e impostare la larghezza del file contenitore div alla larghezza del suo contenuto.

.container{
width: fit-content;
}

Successivamente, utilizzando il file @keyframe regola, definisci un'animazione che controlla il modo in cui l'animazione avanza nel tempo. Imposta la larghezza su "0%" a 0%. A 100%, imposta la larghezza su "100%" in questo modo:

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

Successivamente, seleziona l'elemento con il nome della classe testo e impostare il traboccare proprietà a nascosto. In questo modo ti assicurerai che il testo rimanga nascosto finché l'effetto di digitazione non è iniziato. Dopo averlo fatto, assicurati che il testo rimanga su una riga impostando il file spazi bianchi proprietà a orarap. Dai il testo classifica un carattere a spaziatura fissa e aggiungi un bordo verticale verde a destra del testo.

Questo bordo darà l'aspetto di un cursore. Imposta l'appropriato dimensione del font e il animazione proprietà a tipo-testo. Infine, aggiungi il passi() funzione al funzione di temporizzazione dell'animazione.

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

Quando esegui il codice nel browser, questo è ciò che dovresti vedere:

tramite GIPHY

Se desideri un effetto di digitazione più lungo, puoi regolare la durata dell'animazione e il numero di passaggi specificati nel file passi() funzione.

Dare vita al cursore

L'effetto macchina da scrivere è quasi completo, anche se manca una caratteristica, ovvero il cursore lampeggiante. Ricordiamo che nell'ultimo blocco di codice è stato impostato un bordo destro sul testo che fungerà da cursore. Puoi aggiungere un'animazione a questo cursore usando il @keyframe anche governare.

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

Dopo aver definito l'animazione personalizzata, aggiungi il nome dell'animazione al file animazione proprietà sul testo classe e impostare la durata su 0,6 secondi.

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

Ora quando esegui il codice, dovresti vedere un cursore lampeggiante.

tramite GIPHY

Il potere delle funzioni CSS

Le funzioni CSS hanno rivoluzionato il modo in cui vengono creati i siti Web, offrendo a te come sviluppatore uno straordinario kit di strumenti. Queste funzioni versatili consentono stili e interazioni dinamici che una volta erano riservati a linguaggi di scripting complessi.

Dalle manipolazioni dei colori ai layout reattivi, alle animazioni e alle trasformazioni creative, le funzioni CSS hanno ampliato le possibilità del web design. Con funzioni come calc() per calcoli flessibili, linear-gradient() per sfondi straordinari e Translate() per animazioni accattivanti, puoi creare utenti visivamente accattivanti e coinvolgenti esperienze.