Utilizando efectos de .show, .hide y .delay (Propio de jQuery) crearemos un discreto mensaje informativo que aparecerá en una esquina inferior de nuestro blog, el cual desaparecerá en un determinado lapso de tiempo.
Para ver un ejemplo de este mensaje, puedes presionar en los siguientes botones:
Espera que la transición concluya antes de iniciar otra función:
La lista de efectos en jQuery UI es más extensa, y puedes modificar a antojo los parámetros tales como las opciones, duración, etc.
El tutorial
Paso 1: Instalar jQuery UI en la plantilla:
Para poder ejecutar correctamente las funciones deberás instalar jQuery UI antes de </head> mediante el siguiente código:
<script src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>
Si ya tienes el archivo enlazado en tu plantilla omite este paso.
Paso 2: El marcado del documento:
Después de <body> deberás incluir el siguiente contenedor:
<div id="nota-informativa">
<!--Inserta el texto del mensaje acá -->
</div>
No olvides incluir algún fragmento de texto que desees mostrar.
Paso 3: Añadir CSS al contenedor:
Ahora antes de ]]></b:skin> deberás añadir el siguiente código con las reglas del contenedor:
#nota-informativa {
padding:5px; /*Espaciado interno*/
width:180px; /*Ancho del contenedor*/
text-align:center; /*Alineación del texto*/
background-color:#FFEE88; /*Color de fondo*/
position:fixed; /*Permite que se mantenga estático*/
display:none; /*Oculta el contenedor*/
left:200px; /*Separación del borde izquierdo*/
bottom:80px; /*Separación inferior del borde*/
box-shadow:0 0 5px #555; /*Sombras CSS3*/
}Paso 4: Incluir el script con la función en la plantilla:
En este paso repasaremos los conceptos básicos para ejecutar una función, recuerda que al igual que Javascript nativo, necesitas incluir todo dentro de un evento, en nuestro caso haremos que la función empiece al inicio de carga de la página:
<script type="text/javascript">
$(document).ready(function () {
// Nuestro script cargará cuando el documento haya cargado al 100%
});
</script>
Debido a que el selector de nuestro contenedor es #nota-informativa, procederemos a escribir nuestro script, para ello utilizaremos 4 efectos:
Retardo del script (.delay) >> Uso de .show >> Retardo del siguiente efecto >> Uso de .hide
Si no se entiende, al ver el script posiblemente se pueda ver más claramente:
<script type="text/javascript">
$(document).ready(function () {
$("#nota-informativa")
.delay(2500) // Tiempo del retraso en milisegundos antes de que aparezca el contenedor
.show( "bounce", { times:3, distance:100, direction:'down' }, 2000 ) // Uso de .show, específicamente con bounce y algunos parámetros específicos de esta animación.
.delay(2000) //Tiempo de duración del contenedor en la página
.hide( "drop", { direction: "down" }, "slow" ); //Uso de .hide, con el efecto drop.
});
</script>
Los valores numéricos corresponden a tiempos, y en el caso de bouncing en "distance" es la altura máxima de rebote.
Cada efecto es distinto y tiene distintas opciones, pero básicamente sería lo mismo. Si deseas ver una lista de efectos compatibles puedes revisar la documentación de jQuery UI, en el apartado Effect.
Si te ha gustado el efecto de los ejemplos, puedes observar el código fuente que se muestra a continuación, si quieres que se ejecute alguno de manera automática, no olvides reemplazar el evento al que se expone a principios del paso 4:
Efecto Puff:
Marcado HTML:
<div class="nota-informativa" id="puff">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut odio. Nam sed est. Nam a risus et est iaculis adipiscing. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer ut justo. In tincidunt viverra nisl. Donec dictum malesuada magna.
</div>
Script:
<script>
$( "#handler-puff" ).click(function() { // PUFF
$( "#puff" ).show( "puff", 1000 )
.delay(2000)
.hide( "puff", 1000 );
});
</script>
Efecto Bounce:
Marcado HTML:
<div class="nota-informativa" id="bounce">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut odio. Nam sed est. Nam a risus et est iaculis adipiscing. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer ut justo. In tincidunt viverra nisl. Donec dictum malesuada magna.
</div>
Script:
<script>
$( "#handler-bounce" ).click(function() { // BOUNCE
$( "#bounce" ).show( "bounce", { times:3, distance:100, direction:'down' }, 2000 ).delay(2000).hide( "bounce", { times:1, distance:100, direction:'down' }, 1000 );
});
</script>
Efecto Blind:
Marcado HTML:
<div class="nota-informativa" id="blind">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut odio. Nam sed est. Nam a risus et est iaculis adipiscing. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer ut justo. In tincidunt viverra nisl. Donec dictum malesuada magnaa.
</div>
Script:
<script>
$( "#handler-blind" ).click(function() { // BLIND
$( "#blind" ).show( "blind", { direction:'down' }, 1000 )
.delay(2000)
.hide( "blind", { direction:'down' }, 1000 );
});
</script>
Efecto Explode:
Marcado HTML:
<div class="nota-informativa" id="explode">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut odio. Nam sed est. Nam a risus et est iaculis adipiscing. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer ut justo. In tincidunt viverra nisl. Donec dictum malesuada magna.
</div>
Script:
<script>
$( "#handler-explode" ).click(function() { // EXPLODE
$( "#explode" ).show( "explode", 500 )
.delay(2000)
.hide( "explode", 500 );
});
</script>
CSS Universal de todos los ejemplos:
.nota-informativa {
padding:5px;
width:180px;
text-align:center;
background-color:#FFEE88;
position:fixed;
display:none;
left:200px;
bottom:80px;
box-shadow:0 0 5px #555;
}Botones de ejecución:
<center>
<input class="button" id="handler-puff" type="button" value="Efecto Puff" /> <input class="button" id="handler-bounce" type="button" value="Efecto Bounce" /> <input class="button" id="handler-blind" type="button" value="Efecto Blind" /> <input class="button" id="handler-explode" type="button" value="Efecto Explode" /></center>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut odio. Nam sed est. Nam a risus et est iaculis adipiscing. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer ut justo. In tincidunt viverra nisl. Donec dictum malesuada magna.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut odio. Nam sed est. Nam a risus et est iaculis adipiscing. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer ut justo. In tincidunt viverra nisl. Donec dictum malesuada magna.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut odio. Nam sed est. Nam a risus et est iaculis adipiscing. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer ut justo. In tincidunt viverra nisl. Donec dictum malesuada magnaa.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut odio. Nam sed est. Nam a risus et est iaculis adipiscing. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer ut justo. In tincidunt viverra nisl. Donec dictum malesuada magna.
No hay comentarios:
Publicar un comentario