JQuery - Problema al animar elementos al aparecer en pantalla (se animan todos a la vez) – sin plugins

   
Vista:
Imágen de perfil de Edwing

Problema al animar elementos al aparecer en pantalla (se animan todos a la vez) – sin plugins

Publicado por Edwing (11 intervenciones) el 27/06/2016 23:57:19
Buen día, les agradecía si me colaboran con saber como hago para solucionar que con unos elementos que quiero animar al aparecer en pantalla en base a una clase, no se me animen todos los elementos a la vez como si fuesen un mismo elemento (la animación consiste simplemente en pasar de un “opacity: 0;” a un “opacity: 1;”) - es decir, lo que sucede es que al aparecer en pantalla el 1er elemento que tiene la clase con el “opacity: 0;” (el 1ro de los elementos que jquery les va a asignar la clase con el “opacity: 1;”) el resto que tienen dicha clase también se animan antes de aparecer en pantalla, es decir jqery también les asigna la clase con el “opacity: 1;” antes de llegar a estar en pantalla; para hacerme entender mejor les comparto en codepen el código; o si conocen un mejor método de lograr lo que necesito sin plugins me ayudarían mucho, de nuevo muchas gracias. http://codepen.io/EdwingGit/pen/RRRgZq
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de xve

Problema al animar elementos al aparecer en pantalla (se animan todos a la vez) – sin plugins

Publicado por xve (557 intervenciones) el 28/06/2016 09:56:04
Hola Edwin, he revisado el código al que haces referencia, y no me queda claro exactamente cual es el problema, o que tendría que hacer que no hace... nos puedes comentar con mas detalle?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

Problema al animar elementos al aparecer en pantalla (se animan todos a la vez) – sin plugins

Publicado por arck (21 intervenciones) el 29/06/2016 11:52:18
En tu caso la animación se basa en la clase por lo que todos los textos que tenga esa clase tendrán esa animación.

Prueba a hacerlo por id y poner un id a cada uno de los párrafos que quieras que tengan la animación.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Edwing

Problema al animar elementos al aparecer en pantalla (se animan todos a la vez) – sin plugins

Publicado por Edwing (11 intervenciones) el 29/06/2016 22:06:06
Si, tienes razón , hasta ahora la única manera que veo que puede hacer que se anime a cada elemento por separado es dándoles un id a cada uno diferente e incluirlos en el script... muchas gracias
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Edwing

Problema al animar elementos al aparecer en pantalla (se animan todos a la vez) – sin plugins

Publicado por Edwing (11 intervenciones) el 29/06/2016 22:14:07
Hola, la idea era que cada elemento con la clase que tiene "opasity: 0;" apareciera lentamente con una animación que se generaría jqery cuando el elemento en cuestión este en la pantalla al hacer scroll, jquery le asignaría otra clase con "opasity: 1;" en ese momento de aparecer en la pantalla al hacer scroll, pero el problema es que cuando aparece el 1er elemento en pantalla hace que jquery no solo a dicho elemento le de la nueva clase con "opasity: 1;" sino a todos los elementos sin esperar a que estén en pantalla, cosa que hace que cuando salgan no se ve la animación que simula un fadeIn, , hasta ahora la única manera que veo que puede hacer que se anime a cada elemento por separado es dándoles un id a cada uno diferente e incluirlos en el script.... jaja ojalá me hiciera entender mejor.... igual muchas gracias
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

Problema al animar elementos al aparecer en pantalla (se animan todos a la vez) – sin plugins

Publicado por arck (21 intervenciones) el 29/06/2016 23:02:43
repito, hazlo por id.
cuando vayas a cambiar a opacity: 1
primero comprueba que el elemento sea con el id que quieres y después haz la animación así no haces la animación sobre todos los elementos.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Edwing

Problema al animar elementos al aparecer en pantalla (se animan todos a la vez) – sin plugins

Publicado por Edwing (11 intervenciones) el 30/06/2016 21:11:10
OK... así lo haré, muchas gracias
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar