Comunidad de diseño web y desarrollo en internet online

Como hacer anclas o marcadores asi? (link de ejemplo) Gracias

Citar            
MensajeEscrito el 18 Feb 2013 06:34 am
Hola y muchas gracias de antemano! Creo que esto no tiene que ver con los sitios Parallax sino que quizás podría resolverse con marcadores o anclas y javascript colocandoles id con números a los elementos de una lista y que el javascript tenga un ciclo incremental ¿o puede ser de otra forma? Cómo me recomiendan, les agradezco mucho su ayuda!!

Necesito hacer una navegación de este tipo:
http://www.superlovers.fr/atelier

Donde al clickear en la flechita de abajo se desplaza la página. Sé que para lograr ese efecto de desplazamiento uso un javascript smoothscroll y para decirle a dónde desplazarse debo colocar anclas o marcadores. Lo he conseguido hacer colocando un link con un href:"#aDestino" y luego en el div de destino agregando un id:"aDestino".

Pero esto me sirve sólo si el link lo coloco en botones o divs distintos para cada destino y yo quiero utilizar siempre un mismo botón (para lo que pensaba utilizar una imagen dentro de una etiqueta <a href...>) que me desplace hacia los distintos destinos a medida que voy bajando. No se si se entienda mi explicación pero en el sitio de referencia se puede ver y probar:
http://www.superlovers.fr/atelier

Es eso lo que quiero hacer, la flechita para bajar es siempre la misma dentro del mismo div y cada vez que la cliqueas te lleva a un div diferente (el siguiente) con distinto contenido.

¿Eso se hace con Javascript? ¿Puede ser con javascript y listas ordenadas (OL)?

Agradecería si alguien puede darme una pista para saber cómo resolverlo o si saben de algún tutorial o web que lo explique. Ya que estuve buscando y no encuentro nada :S

Gracias! Saludos!

Martín

Por marmur

20 de clabLevel



 

firefox
Citar            
MensajeEscrito el 18 Feb 2013 04:42 pm
No creo que este hecho de esa manera

Más bien parece el típico slide en el que para lograr el desplazamiento le pones margen negativo al div que contiene lo que quieres mostrar y vas aumentando o disminuyendo ese margen al darle click a las flechas de navegación.

Por HtrMancera

Claber

342 de clabLevel

1 tutorial

Genero:Masculino  

Front-end Developer

chrome
Citar            
MensajeEscrito el 18 Feb 2013 10:27 pm
Gracias HtrMancera por la respuesta.

Si es así se me complica entonces :S porque en el sitio que estoy haciendo arriba de todo ya tengo un slider (con imagenes que entran por derecha y salen por izquierda) ocupando todo el espacio visible y la idea era que al clickear la flecha bajara a distintas anclas, pero usando siempre la misma flecha.

Pensé que se podía hacer con javascript si a las anclas les colocaba un número y en el onclick o en una función, no sé cómo sería, le indicaba que fuera al ancla siguiente.

Ya al costado tengo el ancla para "Volver arriba de todo" que la tengo con position fixed.

Gracias, saludos

Por marmur

20 de clabLevel



 

firefox
Citar            
MensajeEscrito el 19 Feb 2013 09:56 pm
depronto esto te puede servir

http://demos.flesler.com/jquery/scrollTo/

Por HtrMancera

Claber

342 de clabLevel

1 tutorial

Genero:Masculino  

Front-end Developer

chrome
Citar            
MensajeEscrito el 20 Feb 2013 05:09 pm
Gracias HtrMancera. Había visto un ejemplo similar, el problema es que el sitio es responsive, con divs con float y medidas relativas (max-with:100%) entonces cuando se redimensione el navegador y se bajen los divs se va a modificar la altura. Esta noche lo veo bien y comento, muchas gracias!!!

Saludos

M.

Por marmur

20 de clabLevel



 

firefox

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.