Foros del Web » Creando para Internet » HTML »

Como se logra este efecto?

Estas en el tema de Como se logra este efecto? en el foro de HTML en Foros del Web. 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) ...
  #1 (permalink)  
Antiguo 29/01/2012, 10:06
Avatar de demeNcys  
Fecha de Ingreso: junio-2009
Ubicación: Buenos Aires
Mensajes: 147
Antigüedad: 10 años, 3 meses
Puntos: 9
Como se logra este efecto?

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 ?
  #2 (permalink)  
Antiguo 31/01/2012, 13:28
Avatar de dual3nigma
Colaborador
 
Fecha de Ingreso: febrero-2010
Ubicación: Ciudad de México
Mensajes: 295
Antigüedad: 9 años, 7 meses
Puntos: 122
Respuesta: Como se logra este efecto?

http://johnpolacek.github.com/scrollorama/
  #3 (permalink)  
Antiguo 31/01/2012, 16:04
 
Fecha de Ingreso: septiembre-2011
Ubicación: Tacna Peru
Mensajes: 14
Antigüedad: 8 años, 1 mes
Puntos: 4
Respuesta: Como se logra este efecto?

jojojojo lo hice yo :P y si, use el scrollrama
  #4 (permalink)  
Antiguo 31/01/2012, 20:39
Avatar de demeNcys  
Fecha de Ingreso: junio-2009
Ubicación: Buenos Aires
Mensajes: 147
Antigüedad: 10 años, 3 meses
Puntos: 9
Respuesta: Como se logra este efecto?

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

Cita:
Iniciado por leonidasesteban Ver Mensaje
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.
  #5 (permalink)  
Antiguo 31/01/2012, 20:56
Avatar de Carlangueitor
Moderador ლ(ಠ益ಠლ)
 
Fecha de Ingreso: marzo-2008
Ubicación: México
Mensajes: 10.035
Antigüedad: 11 años, 6 meses
Puntos: 1328
Respuesta: Como se logra este efecto?

Ahí mismo en la página dice:

Cita:
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
__________________
Grupo Telegram Docker en Español
  #6 (permalink)  
Antiguo 01/02/2012, 19:11
 
Fecha de Ingreso: septiembre-2011
Ubicación: Tacna Peru
Mensajes: 14
Antigüedad: 8 años, 1 mes
Puntos: 4
Respuesta: Como se logra este efecto?

Cita:
Iniciado por demeNcys Ver Mensaje
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

Etiquetas: css3
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 21:19.