diferentes velocidades scroll a cada capa css html5
3 seguidores
Espero haber acertado con el titulo,
lo vereis perfectamente es estos links de ejemplo;
http://nikebetterworld.com/index
http://www.designmadeingermany.de/magazin/5/
las dudas son respecto a como modificar las velocidades del scroll dependiendo del z-index, además hay imagenes que parecen estar dentro de una mascara.
creo que estas funcionalidades css-js se van a poner muy de moda para suplir los efectos visuales típicos de flash.
agradeceré cualquier idea relativa al funcionamiento de esta implementación.
Enfegu
Sobre lo de imagen con mascara te refieres a que se ve una imagen con otra encima como si fuera un marco o algo asi?
polowsky
pues si, el efecto es el de una imgen moviendose dentro de un marco.
la página está hecha en html5 (acabo de actualizar el titulo), las diferentes partes son etiquetas <section> un nuevo elemento, creo que mediante este atributo 'data-scrolloffset' se define la velocidad del elemento con respecto al movimiento del scroll.
esta semana empiezo con este proyecto, alguna idea, tendré que hacerlo en html5?,
creo que es un tema bastante interesante, una ayudita please.
gracissimas.
hartum
con jquery y controlando la propiedad scroll de la página
Enfegu
Para el tema imagen con marcos se me ocurre esta manera, por ejemplo:
<img src="url_imagen_marco.png" width="ancho" height="alto" style="background-image:url(url_imagen_normal.png);"/>
De esta manera la imagen seria el marco y la imagen de fondo seria la imagen que estará bajo el marco, espero que te sirva
polowsky
Creo que deje el hilo un poco olvidado...
la imagen hay varías formas de ponerla, simplemente poniendo un elemento dentro de otro e insertando un fondo.
la pagina utiliza un efecto llamado parallax, hay varios ejemplos, aquí uno:
http://www.franckmaurin.com/the-parallax-effects-with-jquery/#comment
también es conveniente apliarle este plugin para dar un efecto más suave.
http://benalman.com/projects/jquery-throttle-debounce-plugin/