30 julio, 2019
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:
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.
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 color
con el valor inicial "red".
BlinkIt
, se obtiene el elemento con el id "blink" usando document.getElementById("blink")
y se almacena en la variable blink
.#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.blink
con los valores calculados.
<div id="blink">Hola!</div>
<div id="blink" onclick="parent.location='http://codea.app'">Hola!</div>
onclick
que 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:
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.
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.
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:
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:
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 7231 veces
Curso de Diseño de una Página Web en HTML & CSS
Descarga del código fuente
USD 0.00
© Todos los derechos reservados Codea App | ...de frente al código!!! | 2020 - 2023