TechBlogSD - Tutto per WordPress e sviluppo WEB
Istruzioni WEB e WordPress, notizie, recensioni di temi e plugin

Come creare un effetto di transizione dei caratteri dinamici?

15

In passato, l’HTML era la base per il web design. Gli sviluppatori erano soliti definire gli stili all’interno dell’HTML per cambiare i colori e altri parametri. Tuttavia, l’uso di CSS e JavaScript è più comunemente usato al giorno d’oggi. Puoi cambiare il colore del carattere di un testo in modo dinamico all’interno di una pagina utilizzando CSS e JavaScript. Questo è utile poiché puoi cambiare il colore del carattere senza ricaricare una pagina. Scopri come modificare dinamicamente il contenuto utilizzando diverse proprietà dei caratteri?

Widget per la modifica del colore del carattere

Di seguito è riportato un esempio di come appare la transizione dei caratteri.

È possibile modificare il colore, il peso del carattere e la famiglia del carattere secondo i requisiti.

Come creare questo widget?

Il widget di transizione dei caratteri contiene tre componenti:

  • CSS
  • JavaScript e
  • HTML

Puoi utilizzare tutti insieme in un widget o utilizzare il codice separatamente. Ad esempio, se desideri utilizzare il widget su una sola pagina del tuo sito, copia e incolla tutto il codice sulla tua pagina come spiegato di seguito. In alternativa, se desideri inserire il widget in più posizioni, separa CSS e JavaScript per inserirli come file esterni nella pagina.

Esempi di utilizzo del widget di transizione dei caratteri

L’utilizzo dipende dal sistema di gestione dei contenuti che utilizzi per creare il tuo sito web.

  • Nella pagina Web HTML semplice, puoi inserire il codice del widget nelle sezioni dell’intestazione e del corpo.
  • Se utilizzi piattaforme come Weebly, usa l’elemento Embed Code per inserire il codice nella tua pagina. Altrimenti, puoi utilizzare le sezioni di intestazione e piè di pagina per inserire rispettivamente codice CSS e JS.
  • Su WordPress, puoi utilizzare il blocco HTML personalizzato utilizzando l’editor Gutenberg per inserire il widget.

CSS per la transizione dei caratteri

Aggiungi il seguente codice CSS nella sezione della tua pagina web:

<style type="text/css"> table { font-family: "georgia"; font-size: 35pt; color: blue; } #celSlide { letter-spacing: 9px; color: silver; } </style>

JavaScript per la transizione dei caratteri

Aggiungi il seguente codice di script nella sezione piè di pagina (sotto il contenuto) della tua pagina web che si trova dopo il corpo della tua pagina:

<script type="text/javascript"> var sColor1 = "white"; var sColor2 = "gray"; var iColorLoop = 0; var iCurrentCELL = 0; var bAscending = true; var output = null; var startTime = new Date(); function startCycle() { output = document.getElementById('output'); setInterval(cycleColors,100); } function cycleColors() { var celColorChange = document.getElementById('celColorChange').cells; if (bAscending) { celColorChange[iCurrentCELL++].style.color = sColor2; if (iCurrentCELL == celColorChange.length) { bAscending = false; iCurrentCELL = celColorChange.length; } } else { celColorChange[--iCurrentCELL].style.color = sColor1; if (iCurrentCELL == 0) { bAscending = true; changeColors(); } } } function changeColors() { switch (iColorLoop++) { case 0: sColor1="yellow"; sColor2="orange"; break; case 1: sColor1="hotpink"; sColor2="purple"; break; case 2: sColor1="aqua"; sColor2="blue"; break; case 3: sColor1="lightgreen"; sColor2="green"; } if (iColorLoop > 3) iColorLoop = 0; } </script>

HTML per widget di transizione dei caratteri

Sotto il contenuto HTML per il widget di transizione dei caratteri. Puoi inserire questo codice ovunque all’interno della sezione del corpo della tua pagina.

<body onload="startCycle()"> <div> <table> <tr id="celColorChange"> <td>Welcome to</td> <td>W</td> <td>e</td> <td>b</td> <td>N</td> <td>o</td> <td>t</td> <td>s</td> </tr> </table> </div> </body>

Personalizzazione del widget

Puoi personalizzare il colore e i caratteri in base alle tue esigenze. Come vedi, usiamo table per inserire la transizione del contenuto. È possibile utilizzare impostazioni di bordo, sfondo e caratteri diversi per ogni cella per decorare il widget di transizione.

Fonte di registrazione: www.webnots.com
Lascia una risposta

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More