animate archivos -

¿Cómo animar el scroll del navegador al dar clic en una liga o menú? #jquery #javascript

Ver ejemplo.

Para realizar un movimiento del scroll en el navegador de forma animada, vamos a hacer uso de la función anímate de jquery(puedes visitar mi entrada donde hablo a fondo de esta función) y también haremos uso de la función offset para obtener el valor de nuestro elemento destino.

El siguiente código hace posible la animación del scroll de una manera rápida y fácil:

Html


<!-- menu para dar clic -->
    <div style="height:50%; width:120px; position:fixed; top:100px; font-size:20px; background:#000; color:#fff; opacity:.5; padding:10px;">
    	<a href="#opcion1"  class="scroll">Ir a opcion 1</a><br />
        <a href="#opcion2"  class="scroll">Ir a opcion 2</a><br />
        <a href="#opcion3"  class="scroll">Ir a opcion 3</a><br />
        <a href="#opcion4"  class="scroll">Ir a opcion 4</a><br />
        <a href="#opcion5"  class="scroll">Ir a opcion 5</a><br />
        <a href="#opcion6"  class="scroll">Ir a opcion 6</a><br />
    </div>

    <!-- los elementos destino -->
    <div style="height:500px; background:#fff;">
    	<p id="opcion1">Un pato</p>
    </div>
     <div style="height:500px; background:#eee;">
    	<p id="opcion2">Dos pato</p>
    </div>
     <div style="height:500px; background:#ddd;">
    	<p id="opcion3">Tres pato</p>
    </div>
     <div style="height:500px; background:#ccc;">
    	<p id="opcion4">Cuatro pato</p>
    </div>
     <div style="height:500px; background:#bbb;">
    	<p id="opcion5">Cinco pato</p>
    </div>
     <div style="height:500px; background:#aaa;">
    	<p id="opcion6">Seis pato</p>
    </div>

Javascript


$(document).ready(function(){	
  $(".scroll").click(function(event){					 
 //bloqueamos la función del anchor original					 
 event.preventDefault();					 
 //dirigimos de manera animada al id del anchor					 
 $('html,body').animate({											 
 //le indicamos al scroll vertical que se dirija al objeto con el id											 
 //guardado en el anchor a su posición top.											 
 scrollTop:$(this.hash).offset().top											 
 },1000);	
});
});

Ver ejemplo.

Nota: la función offset nos sirve para obtener la posición de un elemento, en este caso el top de elemento respecto a la página.

¿Cómo crear una notificación con jquery, sin utilizar plugins?

En esta entrada vamos a ver cómo crear notificaciones con jquery en nuestro sitio web, de tal manera aparezca en un lugar donde el usuario la vea, puedes ver un ejemplo dando click aqui.

Existen muchos plugins pero en este artículo yo les enseñare como hacer sus propias notificaciones para que sean libres de modificarlas a su antojo.

Si nunca has utilizado jquery te recomiendo te des una vuelta por mi curso gratuito, que no te tomara más de 1 hora y te aseguro que al final sabrás utilizar bien esta librería.

Ahora vamos a lo divertido, primero anexo un código css el cual contiene nuestra clase de nombre Error, en este caso haremos una notificación de error, por lo cual pondré colores rojos:


.Error{
     position:absolute;
    z-index:32000;
    top:10px;
    left:50%;
    padding:5px;
    width:500px;
    margin-left:-255px;
    text-align:center;
     border: #d8d8d8 1px solid;
    background:#F8F8F8;
    color:#f00;
    font-weight:bold;
    opacity:0;
     font-size:1.2em;
}

El código anterior nos sirve para posicionar nuestra notificación, la cual aún no existe, la clase esta con opacity igual a 0 para que nuestro control tenga una animación de aparición inicial y le dé más estética, también le he asignado la posición top para que aparezca arriba y centrado, ustedes pueden diseñar su notificación a su antojo después de ver esta entrada.
En el siguiente código de javascript explico línea por línea que es lo que va haciendo:

function MensajeError(mensaje, time) {

	//si no se envia la variable time, esta se define por defecto en 6 segundos
    if (time === undefined) time = 6000;

	//agregamos el div a nuestra pagina con la clase css Error anteriormente hecha
    $("body").append("&lt;div class='Error'&gt;&lt;/div&gt;");

     //asignamos el texto del error al div que creamos
    $(".Error").html(mensaje);

    //aqui procedemos a crear la animación para que el div se muestre y se oculte despues de cierto tiempo
    $(".Error")
  .animate({ //seleccionamos el div
      opacity: 1 //aparece
  }, 500  //la animación se realiza medio segundo
          , function () { //ejecutamos un callback con función anonima para desaparecer la notificación despues de 6 segundos
              $(".Error").animate({ //seleccionamos nuevamente el div
                  opacity: 0 //ocultamos

              }, time   //tiempo de 6 segundos por defecto
              , function () {
				  				//al final en el callback del ultimo evento eliminamos el div de la pagina.
				  				 $(this).remove();
			  				}
              )
          })
}

Si nunca han utilizado la función anímate() de jquery te recomiendo te des una vuelta por mi artículo donde explico con detalle su funcionalidad.
Y bueno así de sencillo se hace una notificación con jquery sin utilizar plugins extras ni nada, ya solo queda invocarla asi: MensajeError(‘¡un error fatal!’).

9.- La función Animate – Curso Básico de #Jquery #9

La función animate() de jquery nos sirve para crear animaciones, transformando los elementos HTML de nuestro sitio web. Su funcionalidad se basa en: realizar una transformación del elemento recibiendo el estilo final (CSS) que tendrá nuestro objeto, alguna acción (reducir de tamaño, desaparecerlo) y en que tiempo se realizara el efecto.

Algo que vale la pena recordar, es que siendo una función de jquery, esta función tiene un parámetro al final para ejecutar un callback, y así podemos realizar varias animaciones en secuencia.

Para comprender la función muestro el siguiente ejemplo, en el cual línea por línea explico que es lo que realiza:

Código HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>animate</title>
        <script src="../scripts/jquery.js"></script>
    </head>

    <body>
    	<input type="button" value="inicia" onclick="inicia();" />
        <div  style="width:100px; position:relative; height:100px; background:#060;"></div>
        <br />

    </body>
</html>

Código Jquery


$("div")
    .animate({ //seleccionamos el div
            opacity: 0.25, //dismunuye la opacidad del objeto
            left: "+=100", //aumenta la posicion en horizontal del objeto a 100 px
            height: "toggle" //oculta el objeto
        }, 2000 //la animación se realiza en 2 segundos
        ,
        function() { //ejecutamos un callback con función anonima para regresar a la normalidad el objeto
            $("div").animate({ //seleccionamos nuevamente el div
                    opacity: 1, //regresa la opacidad del objeto a normal
                    left: "-=100", //dismunuye la posicion del objeto menos 100 px
                    height: "toggle" //aparece el objeto
                }, 1000 //tiempo de 1 segundo
                , inicia //el callback ejecuta la funcion inica para volver a comenzar todo
            )
        })
}

Ejemplo en ejecución

El código anterior, al presionar el botón inicia, realiza una animación y ejecuta un callback para regresar el div a su estado original.

Utilizando animate() podemos realizar todo tipo de animaciones a nuestros elementos HTML, recomiendo que la utilicen e intenten realizar cosas por si solos en lugar de bajar cosas ya hechas, esto les ayudara a comprender como funcionan los plugins de jquery y les dará facilidad para modificarlos o crear los plugins propios (creación de plugins de jquery, el siguiente curso que estoy por hacer).

Ir al Capitulo Siguiente (10.- Creación de Elementos HTML con Jquery).

Ir al Capitulo Anterior (8.- Callbacks).