30 julio, 2019
Texto parpadeante con JavaScript
Aprende como dominar elementos de pagina web con JavaScript y darles efectos increíbles, texto que parpadea en tu sitio web con pocas lineas de código
Suscríbete a nuestro canal en Youtube
SuscríbirseEn este truco podremos ver cómo poner un texto en forma de parpadeo donde tú puedes agregar tus estilos y mejorar esta idea. Y "Optimiza tu Página Web con Efectos de Parpadeo: Un Tutorial de JavaScript"
¿Quieres darle un toque dinámico y atractivo a tu página web? En este tutorial, exploraremos cómo implementar un efecto de parpadeo en el texto utilizando JavaScript. Este pequeño truco no solo añade un toque visual interesante, sino que también puede mejorar la retención de usuarios y la interactividad de tu sitio.
Ahora te presentamos el código que debes insertar en tu código:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Texto Parpadeante en Javascript</title>
<style>
*{margin: 0;}
.banner{
background-color: orange;
display: grid;
justify-content: center;
place-items: center;
height: 200px;
width: 100%;
}
#blink {
font-size: 50px;
}
</style>
</head>
<body >
<script>
window.setInterval (BlinkIt, 500);
var color = "red";
function BlinkIt () {
var blink = document.getElementById ("blink");
color = (color == "#ffffff")? "red" : "#ffffff";
blink.style.color = color;
}
</script>
<div class="banner">
<div id="blink" onclick="parent.location='http://codea.app'">¡Hola Mundo!</div>
</div>
</body>
</html>
Este código JavaScript controla el parpadeo del texto "Hola!" dentro de dos elementos div con el id "blink". Aquí hay un análisis paso a paso:
Intervalo de parpadeo:
window.setInterval(BlinkIt, 500);
Se establece un intervalo que llama a la función BlinkIt cada 500 milisegundos (0.5 segundos). Esto hace que el texto parpadee cambiando su color y tamaño.
Función BlinkIt:
var color = "red";
function BlinkIt() {
var blink = document.getElementById("blink");
color = (color == "#ffffff") ? "red" : "#ffffff";
blink.style.color = color;
blink.style.fontSize = '36px';
}
-
Se define una variable
colorcon el valor inicial "red". - Dentro de la función
BlinkIt, se obtiene el elemento con el id "blink" usandodocument.getElementById("blink")y se almacena en la variableblink. - Se alterna entre los colores rojo y blanco (
#ffffff) utilizando la operación ternaria(color == "#ffffff") ? "red" : "#ffffff". Entonces, si el color es blanco, se establece como rojo; de lo contrario, se establece como blanco. - Se actualiza el color y el tamaño del elemento
blinkcon los valores calculados.
Elementos HTML:
<div id="blink">Hola!</div>
<div id="blink" onclick="parent.location='http://codea.app'">Hola!</div>
- Hay dos elementos div con el mismo id "blink". Tener elementos con el mismo id no es recomendable, ya que los id deben ser únicos en un documento HTML.
- El primer div se usa para el parpadeo y el segundo div tiene un atributo
onclickque redirige a la página 'http://codea.app' cuando se hace clic en él.
En resumen, este código implementa un efecto de parpadeo en el texto "Hola!" que se encuentra dentro de un div con el id "blink", y también tiene un segundo div con el mismo id que redirige a 'http://codea.app' cuando se hace clic en él.
Beneficios del Parpadeo:
- Atracción Visual: El parpadeo captura la atención del usuario, destacando información importante.
- Interactividad: El segundo div del ejemplo muestra cómo puedes incorporar acciones al parpadeo, como redireccionar a otra página al hacer clic.
Consideraciones Técnicas: Aunque este efecto puede mejorar la estética de tu sitio, ten en cuenta las buenas prácticas, como evitar el uso excesivo para no distraer a los usuarios.
Crear un Texto Parpadeante solo con CSS
En el competitivo mundo de la web, destacar es esencial. ¿Te gustaría añadir un toque de dinamismo y atracción a tu sitio? En este artículo, exploraremos cómo crear un efecto de texto parpadeante utilizando solo CSS. Este truco no solo es visualmente atractivo, sino que también puede mejorar la retención de usuarios y la interactividad de tu página web.
Cómo Lograrlo con CSS:
Con solo unas líneas de código CSS, puedes lograr un efecto de parpadeo llamativo. Utilizando @keyframes, definimos una animación que alterna la opacidad del texto en intervalos regulares. Luego, aplicamos esta animación al texto que deseamos que parpadee.
@keyframes parpadeo {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.parpadeante {
animation: parpadeo 1s infinite;
}
Beneficios del Texto Parpadeante:
- Atracción Visual: Captura la atención de tus visitantes de manera efectiva.
- Interactividad: Puedes aplicar este efecto a llamadas a la acción, mensajes destacados o información importante.
Consideraciones Técnicas: Aunque el texto parpadeante puede ser impactante, es crucial utilizarlo con moderación para no distraer a los usuarios. Además, asegúrate de que sea accesible para todos los usuarios, incluyendo aquellos con discapacidades visuales.
Cómo Implementarlo en tu Sitio:
- Copia el código CSS proporcionado.
- Asigna la clase "parpadeante" al elemento que deseas que parpadee.
Conclusión: Agregar un efecto de texto parpadeante a tu página web es una manera sencilla y efectiva de mejorar la experiencia del usuario y hacer que tu contenido destaque. Sigue nuestra guía paso a paso y dale a tu sitio un toque de vitalidad que seguramente captará la atención de tus visitantes.
Leido 7833 veces
Demo
Diseño de una Página Web en HTML & CSS
Curso de Diseño de una Página Web en HTML & CSS
Descarga del código fuente
USD 0.00
