Alguien conoce este efecto?

[NakedUP]

Hola, ultimamente estoy viendo muchas paginas con movimiento al aplicar scroll, ¿alguien me sabria decir como se llama el efecto en concreto? ¿es jquery, css, javascript a palo seco? he buscado un poco y no encuentro mucha info

Os dejo un par de ejemplos:

en este van apareciendo imagenes y otros trucos:

http://en.oppo.com/products/find7/

Y en este otro imagenes y texto, queda feten:

http://www.celularis.com/analisis/analisis-del-htc-one/

Un saludo

[siddartha23]

Podrías intentar hacer algo como aplicarle un :hover a las distintas secciones + animaciones css + efectos de jQuery

[andresgarciadev]

pues hay mas de una posibilidad de como lo hacen... lo mas normal seria que tal y como dice siddartha23 al hacer hover sobre determinada caja activar un efecto u otra seira usando scrollTop()

[rogama]

Por lo que veo en la Primera pagina usa varios efectos, el que mas me ha llamado la atencion es el de los 2 moviles que se juntan.
Eso lo hace con JQuery al hacer hover en una zona cambia la propiedad
right: 50%;

por defecto la tenia a:
right: -332px;

eso con un transition aplicado, que no le veo pero creo que es algo al estilo
transition: 1s 500ms;

ya lo tienes, lo mismo con el efecto del texto que aparece, pero hay esta jugando con la opacidad
por defecto la tiene
opacity: 0;

lo cambia a
opacity: 1;

Ya te digo todo por JQuery, aunque puedes intentar hacerlo por CSS si te montas bien la estructura, asi conseguiras una web mas liviana ;)

[pzin]

Son animaciones normales que se activan al llegar el scroll a donde se hacen visibles. Eso lo tienes que hacer mediante JavaScript —detectar el scroll y que las animaciones empiecen.

[Luminis]

Si no me equivoco, ese efecto se llama Parallax.

[pzin]

Iniciado por Luminis

Si no me equivoco, ese efecto se llama Parallax.

No, parallax es una cosa parecida que implica movimiento asíncrono entre el scroll y, normalmente, un fondo.

[NakedUP]

Muchas gracias por las respuestas chicos, muy fina la tuya rogama. Estos efectos la verdad que con poco le dan toda la gracia a la web y son sencillos de utilizar, ya los he estado utilizado en web y muy facil. Los de la pagina de oppo, algunos, no he podido mirarlos pero los tiros van por donde dice rogama. En concreto en la pagina de www.celularis.com usa estos dos efectos para lograr animacion + aparicion con scroll:

animate.css, un monton de efectos que tan solo hace falta aplicar en el class y listo, aki la web con la descarga y documentacion:
http://daneden.github.io/animate.css/

para que aparezca cuando baja el scroll se utiliza javascript, wow.js, os adjunto tambien la pagina con la descarga y documentacion:
http://mynameismatthieu.com/WOW/index.html

superfacil de implementar y te cambia todo el aspecto de la web a algo mucho mas dinamico y atractivo, si necesitais ayuda u os puedo ayudar en algo me decis ;)

Parallax es otra cosa Luminix, algo estube viendo pero tambien funciona con el scroll, fondos y capas, muy muy fino ese efecto y por lo que veo con mucho futuro, hay mucha tendencia a este modelo y los resultados son impresionantes. Me parecio ver que con adobe Muse ya se podia trabajar este modelo con interfaz grafica de manera sencilla.

Un saludo y gracias por las respuestas