TechBlogSD - Todo para WordPress y desarrollo WEB
Instrucciones de WEB y WordPress, noticias, reseñas de temas y complementos

¿Cómo crear un efecto de transición de fuente dinámica?

3

En los primeros días, HTML era la base para el diseño web. Los desarrolladores solían definir estilos dentro de HTML para cambiar colores y otros parámetros. Sin embargo, el uso de CSS y JavaScript se usa con mayor frecuencia en la actualidad. Puede cambiar el color de fuente de un texto de forma dinámica dentro de una página utilizando CSS y JavaScript. Esto es útil ya que puede cambiar el color de la fuente sin recargar una página. Vea cómo cambiar dinámicamente el contenido usando diferentes propiedades de fuente.

Widget de cambio de color de fuente

A continuación se muestra un ejemplo de cómo se ve la transición de fuente.

Puede modificar el color, el peso de la fuente y la familia de fuentes según los requisitos.

¿Cómo crear este widget?

El widget de transición de fuentes contiene tres componentes:

  • CSS
  • JavaScript y
  • HTML

Puede usarlos todos juntos en un widget o usar el código por separado. Por ejemplo, si desea utilizar el widget en una sola página de su sitio, copie y pegue todo el código en su página como se explica a continuación. Alternativamente, si desea insertar el widget en varios lugares, separe CSS y JavaScript para insertarlos como archivos externos en la página.

Ejemplos de uso del widget de transición de fuentes

El uso depende del sistema de gestión de contenido que utilice para crear su sitio web.

  • En una página web HTML simple, puede insertar el código del widget en las secciones de encabezado y cuerpo.
  • Si usa plataformas como Weebly, use el elemento Código incrustado para insertar el código en su página. De lo contrario, puede usar secciones de encabezado y pie de página para insertar código CSS y JS respectivamente.
  • En WordPress, puede usar un bloque HTML personalizado con el editor de Gutenberg para insertar el widget.

CSS para transición de fuentes

Agregue el siguiente código CSS en la sección de su página web:

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

JavaScript para transición de fuentes

Agregue el siguiente código de secuencia de comandos en la sección de pie de página (debajo del contenido) de su página web que está después del cuerpo de su página:

<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 para el widget de transición de fuentes

Debajo del contenido HTML para el widget de transición de fuentes. Puede insertar este código en cualquier lugar dentro de la sección del cuerpo de su página.

<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>

Personalización del widget

Puede personalizar el color y las fuentes según sus necesidades. Como ve, usamos la tabla para insertar la transición de contenido. Puede usar el borde, el fondo y diferentes configuraciones de fuente para cada celda para decorar el widget de transición.

Fuente de grabación: webnots.com
Deja una respuesta

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