jQuery: compruebe si los elementos aparecen a la vista, desvanezca en los que sí lo hacen

He encontrado la respuesta a este problema cuando sé qué elemento especificar, pero lo que estoy buscando es una forma de comprobar ‘en desplazamiento’ si se ha visualizado CUALQUIER elemento con una clase específica, y modificarlos como lo hacen (por ejemplo, cambiar la opacidad, solo aquellos que aparecen a la vista). Sé que el código podría ser similar a esto, pero no puedo hacerlo funcionar:

jQuery(window).on("scroll", function() { var difference = jQuery(window).offset().top + jQuery(window).height()/2; if (difference > jQuery(".makeVisible").offset().top) { jQuery(this).animate({opacity: 1.0}, 500); } }); 

Muchas gracias. Nota: la diferencia de variable existe porque quiero que los elementos se vuelvan visibles al llegar al centro de la pantalla.

Préstamo desde Verificar si el elemento está visible después de desplazarse y Usar jQuery para centrar un DIV en la pantalla para verificar si el elemento está en el centro visible de la pantalla:

 function isScrolledIntoView(elem) { var centerY = Math.max(0,((jQuery(window).height()-jQuery(elem).outerHeight()) / 2) + jQuery(window).scrollTop()); var elementTop = jQuery(elem).offset().top; var elementBottom = elementTop + jQuery(elem).height(); return elementTop <= centerY && elementBottom >= centerY; } 

Entonces podemos modificar su enfoque a:

 jQuery(window).on("scroll resize", function() { jQuery(".makeVisible").each(function(index, element) { if (isScrolledIntoView(element)) { jQuery(element).animate({opacity: 1.0}, 500); } }); }); 

Uso el plugin skrollr.js para lograr esto, que está aquí en github https://github.com/Prinzhorn/skrollr

Luego puede adjuntar parámetros a cualquier etiqueta, por ejemplo, diga que estaba borrando una imagen, podría tener una etiqueta img como

  

con formato

 data-[offset]-(viewport-anchor)-[element-anchor] 

así que está usando – para eludir el parámetro de compensación.

Creo que esta es la forma más fácil de lograr lo que estabas buscando si luego usas jquery para adjuntarlo con algo como

 $('*').attr("data--bottom-bottom="opacity:0;" data--top-top="opacity:0" data--top-center="opacity=1""); 

Estoy en mi móvil, así que no puedo probarlo ahora mismo, pero creo que debería ayudar, ¡si no al menos podría darte una nueva vía para probar!

Estas fonts también pueden ayudarlo: ¿Cómo actualizar (agregar) un href en jquery?

Fade out element, cuando el usuario llega a la parte inferior de la pantalla