Como se logra este efecto?

[demeNcys]

he visto en muchisimas paginas este efecto, que cuando vas bajando se van moviendo los elementos.

http://mejorando.la/conferencia/ (el efecto en las fotos de las caras)

Nose si es css3, si es jquery... tiene algun nombre para buscar un tutorial ?

[dual3nigma]

http://johnpolacek.github.com/scrollorama/

[leonidasesteban]

jojojojo lo hice yo :P y si, use el scrollrama

[demeNcys]

Iniciado por dual3nigma

http://johnpolacek.github.com/scrollorama/

Si me di cuenta despues mirando el codigo, pero me queria asegurar por las dudas.

Iniciado por leonidasesteban

jojojojo lo hice yo :P y si, use el scrollrama

sos el famoso leonidas que nombran reiteradas veces en mejorando.la ?.

Te hago una pregunta ya que no puedo encontrar tutoriales y no puedo llegar a entenderlo.

scrollorama.animate('.imagen1',{ delay:-200, duration: 500, property:'opacity', start:0, end:10});

como manejas esos valores ? ya que no los llego a entender, voy poniendo numeros por poner hasta que queda bien.

[Carlangueitor]

Ahí mismo en la página dice:

The animation parameters you can use are:

duration
number of pixels of scrolling the animation lasts
delay
number of pixels of scrolling before the animation starts
(animation is set to begin when the top of the scroll block is at the bottom of browser window)
property
css property being animated
(must be numeric)
start
value of the css property at the start of the animation
(if unassigned, will be the element’s current property value)
end
value of the css property at the end of the animation
(if unassigned, will be the element’s current property value)
pin
set to true if you want the scroll block to be pinned during its animations
(note: block will be pinned for all its element’s animations)

Una leída a la documentación de cualquier script siempre es buena.

Saludos

[leonidasesteban]

Iniciado por demeNcys

Si me di cuenta despues mirando el codigo, pero me queria asegurar por las dudas.




sos el famoso leonidas que nombran reiteradas veces en mejorando.la ?.

Te hago una pregunta ya que no puedo encontrar tutoriales y no puedo llegar a entenderlo.

scrollorama.animate('.imagen1',{ delay:-200, duration: 500, property:'opacity', start:0, end:10});

como manejas esos valores ? ya que no los llego a entender, voy poniendo numeros por poner hasta que queda bien.

la opacidad se da de 0 a 1 ten cuidado con eso :) y si otra vez en la documentación y jugando mucho tendrás mejores resultados