Hacer que un texto parpadee usando CSS y JavaScript
- Texto parpadeante en HTML
- Hacer que un texto parpadee usando CSS interno o incrustado
- Hacer que un texto parpadee usando CSS en línea
- Hacer que un texto parpadee usando CSS externo
- Hacer que un texto parpadee usando JavaScript
- Hacer que un texto parpadee usando JQuery
- Hacer un texto parpadeante en varias secciones de una página usando JavaScript
- Hacer un texto intermitente alternativo usando CSS
Este artículo analizará el texto parpadeante/flash en gran profundidad. Veremos su finalidad y ventajas.
Aprenderemos numerosas estrategias y técnicas para implementar texto parpadeante en nuestro sitio web. Para implementar el texto parpadeante, exploraremos CSS interno, CSS en línea, CSS externo, JavaScript y jQuery.
Texto parpadeante en HTML
Blink Text es el tipo de texto que parpadea. En los sitios web de compras, es posible que vea un ícono de venta intermitente o un banner de nueva colección con un estilo intermitente.
Es una estrategia efectiva para llamar la atención de los usuarios. HTML ofrece la etiqueta <blink> para esta función; sin embargo, los navegadores ya no la admiten, lo que la convierte en una etiqueta obsoleta.
Examinemos varios métodos para lograr esta funcionalidad sin usar la etiqueta.
Hacer que un texto parpadee usando CSS interno o incrustado
El CSS interno está contenido dentro de la etiqueta de estilo HTML. En la etiqueta, podemos incluir cualquier propiedad CSS.
Mire el código a continuación para saber cómo usamos CSS interno para crear el texto parpadeante.
<html>
<head>
<style>
.blink {
animation: blinker 1s linear infinite;
}
@keyframes blinker
{
50% {
opacity: 0;
}
}
</style>
</head>
<body>
<div class="blink">Internal CSS Blink !</div>
</body>
</html>
Este es uno de los enfoques más directos para hacer que un texto parpadee. Acabamos de hacer un poco de estilo, y el trabajo está hecho.
Algunos de los términos de CSS pueden ser nuevos para usted, pero no se preocupe, veamos en detalle qué significa cada uno de los términos.
la propiedad animación
Usamos la propiedad animation de CSS en la clase blink para aplicar animaciones. La propiedad animación es una abreviatura de:
animation-name |
Especifique un nombre para la animación. |
animation-duration |
Define cuánto tiempo debe tomar una animación para completar un ciclo. |
animation-timing-function |
Especifique la curva de velocidad desde el principio hasta el final de una animación. |
animation-delay |
Especifique una espera para el inicio de una animación. |
animation-iteration-count |
Especifique el número de veces que se debe reproducir una animación. |
animation-direction |
Especifique la dirección de la animación, es decir, hacia adelante, hacia atrás o alternativamente hacia adelante y hacia atrás. |
animation-fill-mode |
Indique cómo las animaciones CSS aplican estilos a sus objetivos antes y después de la ejecución. |
animation-play-state |
Especifique si la animación está en ejecución o en pausa. |
Ahora, comprendamos lo que escribimos en nuestro código. La animación en el código anterior tiene las siguientes propiedades:
- El
intermitentees el nombre de una animación. - El
1ses laanimación-duración, lo que significa que cada ciclo se completará después de 1 segundo. - El “lineal” es la “función de tiempo de animación”, lo que significa que la animación se reproducirá a la misma velocidad de principio a fin.
- El “infinito” es el “recuento de iteraciones de animación”, lo que significa que la animación se reproducirá un número ilimitado de veces.
Para resumir toda la información, concluimos que la animación intermitente recorrería cada ciclo en un segundo a la misma velocidad, un número infinito de veces.
Fotogramas clave
En CSS, los @keyframes definen la regla de animación. Los estilos CSS modificables se utilizan para crear animaciones.
Pueden ocurrir varios cambios de propiedad CSS durante una animación. Debemos determinar cuando un cambio de estilo se presenta en porcentajes o contiene las frases desde y hasta, que equivalen a 0% y 100%; 0% denota el inicio y 100% denota su finalización.
Para obtener la mejor compatibilidad con el navegador, especifique siempre los selectores 0% y 100%. Lo veremos más adelante en el artículo.
La sintaxis CSS de los fotogramas clave es:
@keyframes animation-name {*keyframes-selector* {*css-styles;}*}
Echemos un vistazo a lo que hicimos en nuestro código.
Ponemos fotogramas clave en nuestra animación intermitente y especificamos que al 50%, su opacidad debe ser cero. La transparencia de un elemento se establece a través de la propiedad opacity.
El valor de la propiedad opacidad debe estar estrictamente entre 0 y 1.
Prefijos de proveedores de CSS
Un prefijo único agregado a una propiedad CSS se denomina prefijo de proveedor. Hay varias propiedades CSS que las versiones anteriores del navegador no admiten, por lo que debe usar un prefijo del navegador para ayudar a esas etiquetas.
Hay un prefijo para cada motor de representación que solo aplicará el atributo a ese navegador específico.
- Internet Explorer, Microsoft Edge:
-ms- - Chrome, Safari, iOS, Android:
-webkit- - Firefox:
-moz- - Ópera:
-o-
Reescribamos el código descrito anteriormente para que funcione con tantos navegadores como sea posible.
<html>
<head>
<style>
.blink {
-webkit-animation: blinker 1s linear infinite;
-moz-animation: blinker 1s linear infinite;
-ms-animation: blinker 1s linear infinite;
-o-animation: blinker 1s linear infinite;
animation: blinker 1s linear infinite;
}
@-webkit-keyframes 'blinker' {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-moz-keyframes 'blinker' {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-o-keyframes 'blinker' {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-ms-keyframes 'blinker' {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes 'blinker' {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
</style>
</head>
<body>
<div class="blink">Hello Blinking World!</div>
</body>
</html>
Hacer que un texto parpadee usando CSS en línea
CSS en línea le permite colocar el estilo directamente en los elementos HTML. Aunque es bueno saberlo, el CSS en línea no es una opción recomendable ya que depende de los elementos, por lo que no es reutilizable.
Además, no podemos usar todas las propiedades y funciones de CSS en el estilo en línea. Hablando de nuestro escenario actual de texto parpadeante, no podemos usar fotogramas clave en CSS en línea, ya que los fotogramas clave no forman parte de los elementos HTML.
Veamos cómo mostrar un texto usando CSS en línea.
<html>
<head>
<style>
@-webkit-keyframes 'blinker' {
50% {
opacity: 0;
}
}
@-moz-keyframes 'blinker' {
50% {
opacity: 0;
}
}
@-o-keyframes 'blinker' {
50% {
opacity: 0;
}
}
@-ms-keyframes 'blinker' {
50% {
opacity: 0;
}
}
</style>
</head>
<body>
<div class="blink" style="animation: blinker 1s linear infinite">
In-line CSS Blink !
</div>
</body>
</html>
Hacer que un texto parpadee usando CSS externo
El CSS externo es la forma de agregar un archivo CSS a nuestro archivo HTML. Es una práctica excelente mantener el estilo y los elementos separados.
Puede agregar el archivo CSS utilizando la etiqueta enlace. Cree un archivo CSS con el nombre estilo.css, copie el código en la etiqueta estilo del código anterior y agréguelo al archivo HTML. Así es cómo.
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="blink">Hello Blinking World!</div>
</body>
</html>
Hacer que un texto parpadee usando JavaScript
JavaScript siempre ha sido un salvavidas al realizar casi cualquier funcionalidad. Proporciona varios métodos y técnicas para hacer cosas asombrosas muy rápidamente.
Veamos cómo hacer que un texto parpadee usando JavaScript.
<html>
<head>
<script>
var blink_speed = 300;
setInterval(function(){
var element = document.getElementById("blink");
element.style.display = element.style.display == 'none'?'':'none';
}, blink_speed);
</script>
</head>
<body>
<div id="blink">Javascript Blink !</div>
</body>
</html>
Entendamos el código JavaScript aquí. ¿Qué magia está haciendo?
Primero, inicializamos una variable con el nombre blink_speed y le asignamos el valor; puede establecer cualquier valor de su elección. Si das 1000, significa 1 segundo, 2000 puntos 2 segundos, y así sucesivamente.
Asignamos 300 en nuestro código, lo que significa que será menos de 1 segundo.
En segundo lugar, usamos la función setInterval de JavaScript. El método setInterval continúa llamando a la función a intervalos específicos (en milisegundos).
Aquí está la sintaxis de la función:
setInterval(function, milliseconds)
El parámetro función son las instrucciones que se ejecutarán repetidamente a intervalos específicos. El parámetro milisegundos recibe la velocidad para los intervalos de ejecución.
En nuestro código, el parámetro función de setInterval primero obtiene el elemento por nombre de Id. Después de obtener el elemento requerido, verificamos usando el operador ternario que si la visualización de nuestro elemento es ninguno, luego lo mostramos y viceversa.
Luego asignamos el blink_speed al segundo parámetro de la función setInterval.
Hacer que un texto parpadee usando JQuery
jQuery es una biblioteca de JavaScript y su propósito es hacer que JavaScript sea lo más fácil posible. Veamos cómo hacer texto parpadeante usando jQuery.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
function blinkText(element){
$(element).fadeOut('slow', function(){
$(this).fadeIn('slow', function(){
blinkText(this);
});
});
}
$(function() {
blinkText('#blink');
});
</script>
</head>
<body>
<div id="blink">JQuery Blink !</div>
</body>
</html>
Esto es bastante simple. Veamos qué está haciendo el código.
Como jQuery es una biblioteca de JavaScript, debemos agregar su referencia en nuestro código para usarla. En el código, creamos una función simple, blinkText, que recibe un elemento HTML.
Primero, llamamos a la función fadeOut en el elemento, y luego, dentro de esta función, llamamos a otra función, fadeIn, en él. Dentro de fadeIn, damos una llamada recursiva a nuestra función, ya que queremos que muestre texto parpadeante infinitas veces.
En conclusión, el texto se desvanecerá, se desvanecerá, se desvanecerá, se desvanecerá, y así sucesivamente, ya que es una llamada recursiva interminable.
Hacer un texto parpadeante en varias secciones de una página usando JavaScript
Hagamos una tarea emocionante. Queremos hacer que el texto parpadee en múltiples áreas de una página.
Es fácil de hacer con CSS. Asigne la misma clase a todos los elementos que desee que parpadeen y se hará.
Pero, ¿cómo hacerlo con JavaScript? Como vimos en el código anterior, JavaScript selecciona solo un elemento.
Averigüemos cómo podemos lograr esto.
<html>
<head>
<script>
function blinkText()
{
var elements = document.getElementsByClassName("blink");
for(var i = 0, l = elements.length; i < l; i++)
{
var blink = elements[i];
blink.style.display = blink.style.display == 'none' ? '' : 'none';
}
}
setInterval(blinkText, 300);
</script>
</head>
<body>
<div class="blink">Hello</div>
<div class="blink">World</div>
</body>
</html>
Si tenemos muchos elementos con el mismo nombre de clase, el document.getElementByClassname devolverá una matriz de todos los elementos. Luego recorremos cada elemento uno por uno y hacemos la tarea.
Hacer un texto intermitente alternativo usando CSS
Ahora, vamos a crear otra animación fantástica para hacer una palabra alterna de texto parpadeante usando solo CSS.
<html>
<head>
<style>
.blink::before {
content: "Welcome";
animation: blinker 1s linear infinite alternate;
}
@keyframes blinker {
0% {
content: "Welcome";
}
50% {
opacity: 0%;
}
100% {
content: "Developer";
}
}
</style>
</head>
<body>
<div class="blink"></div>
</body>
</html>
Inicialmente mostrará “Bienvenido”, luego parpadeará y luego dirá “Desarrollador”. Este bucle se repite continuamente.