[SOLUCIONADO] Duda como animar la transicion en navegacion estatica por id´s

megatone · #1 (**permalink**) 07/08/2015, 10:00

Hola a todos

Mi duda es como animar la transición cuando se navega estaticamente en el documento html mediante las IDS

ejemplo

Código HTML:

<a href="#ventana2">Ir a ventana</a>
<div id="ventana">contenido ventana....</div>
<div id="ventana2">contenido ventana....</div>

Lo que sucede es que al pinchar en el enlace , el navegador ira a visualizar la div con el id "ventana2" , pero lo hace de golpe , me gustaria animar esa transición, ralentizandola para que haga efecto de deslizamiento.

Esto es posible? que debo implementar CSS, HTML , javascript ?? no se como buscar información al respecto , si me enchan un cable se lo agradeceria, un link o cualquier tipo de info .

AngelKrak · #2 (**permalink**) 07/08/2015, 10:37

para eso se usa CSS o JS el que quieras se llaman Transitions lo que buscas, ahi te dejo un ejemplo ;)

HTML:

Código HTML:

Ver original<!DOCTYPE html>
<html>
<head>
<style> 
div {
    width: 100px;
    height: 100px;
    background: red;
    -webkit-transition: width 2s, height 2s, -webkit-transform 2s; /* Safari */
    transition: width 2s, height 2s, transform 2s;
}
 
div:hover {
    width: 300px;
    height: 300px;
    -webkit-transform: rotate(180deg); /* Safari */
    transform: rotate(180deg);
}
</style>
</head>
<body>
 
<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>
 
<div></div>
 
<p>Hover over the div element above, to see the transition effect.</p>
 
</body>
</html>

Demo:
http://www.w3schools.com/css/tryit.a...tion_transform

Mas información:
http://www.w3schools.com/css/css3_transitions.asp
https://developer.mozilla.org/es/doc...iciones_de_CSS

megatone · #3 (**permalink**) 07/08/2015, 11:16

Hola amigo gracias por tu respuesta pero, esa transicion no es la que estoy buscando.

yo lo que busco es que cuando pinche en el enlace que hace refencia a una id de un elemento del docuemnto html , en vez de desplazarse de golpe hasta ella , se desplace de manera mas lenta .

ejemplo de una web que tiene este efecto pero no se como buscarlo

http://jaimezubiaur.com

al pinchar en el icono de la flechita para abajo, pues navega hacia el id #presentacion y se desplaza hasta esa div pero no lo hace de golpe sino que se desliza, eso es lo que quiero conseguir, no tengo que cambiar el ancho ni el alto de las divs.

Gracias de antemano

megatone · #4 (**permalink**) 07/08/2015, 17:51

Hola de nuevo.

Encontre la solución , por si alguien le interesa

Código HTML:

  function desplazar_a(elemento){
	$('html,body').animate({scrollTop: $(elemento).offset().top}, 1000);
	}