Foros Programación Cliente

diferentes velocidades scroll a cada capa css html5

5 5 Respuestas Lunes 17 de enero, 2011
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.



Registrado desde 17/01/11
Número de posts: 3
  • Avatar de Enfegu Enfegu Registrado desde 19/01/11 / Número de posts: 7
    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?
    CkGrafico
    Palimpalem
    Publicado hace más de un año
  • Avatar de polowsky polowsky Registrado desde 17/01/11 / Número de posts: 3
    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.
    Publicado hace más de un año
  • Avatar de HARTUM HARTUM Registrado desde 22/11/02 / Número de posts: 4293
    con jquery y controlando la propiedad scroll de la página
    Publicado hace más de un año
  • Avatar de Enfegu Enfegu Registrado desde 19/01/11 / Número de posts: 7
    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
    CkGrafico
    Palimpalem
    Publicado hace más de un año
  • Avatar de polowsky polowsky Registrado desde 17/01/11 / Número de posts: 3
    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/
    Publicado hace más de un año