Foros del Web » Creando para Internet » HTML »

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

Estas en el tema de Duda como animar la transicion en navegacion estatica por id´s en el foro de HTML en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 07/08/2015, 10:00
 
Fecha de Ingreso: agosto-2015
Mensajes: 3
Antigüedad: 8 años, 7 meses
Puntos: 1
Duda como animar la transicion en navegacion estatica por id´s

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 .
  #2 (permalink)  
Antiguo 07/08/2015, 10:37
Avatar de AngelKrak  
Fecha de Ingreso: noviembre-2014
Mensajes: 917
Antigüedad: 9 años, 4 meses
Puntos: 91
Respuesta: Duda como animar la transicion en navegacion estatica por id´s

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
  1. <!DOCTYPE html>
  2. div {
  3.     width: 100px;
  4.     height: 100px;
  5.     background: red;
  6.     -webkit-transition: width 2s, height 2s, -webkit-transform 2s; /* Safari */
  7.     transition: width 2s, height 2s, transform 2s;
  8. }
  9.  
  10. div:hover {
  11.     width: 300px;
  12.     height: 300px;
  13.     -webkit-transform: rotate(180deg); /* Safari */
  14.     transform: rotate(180deg);
  15. }
  16. </head>
  17.  
  18. <p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>
  19.  
  20. <div></div>
  21.  
  22. <p>Hover over the div element above, to see the transition effect.</p>
  23.  
  24. </body>
  25. </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
  #3 (permalink)  
Antiguo 07/08/2015, 11:16
 
Fecha de Ingreso: agosto-2015
Mensajes: 3
Antigüedad: 8 años, 7 meses
Puntos: 1
Respuesta: Duda como animar la transicion en navegacion estatica por id´s

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
  #4 (permalink)  
Antiguo 07/08/2015, 17:51
 
Fecha de Ingreso: agosto-2015
Mensajes: 3
Antigüedad: 8 años, 7 meses
Puntos: 1
Respuesta: Duda como animar la transicion en navegacion estatica por id´s

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);
	}

Etiquetas: animar, css, estatica, javascript, navegacion, todo, transicion
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 19:58.