Estoy buscando diferentes imágenes de aparición gradual, según el porcentaje de la página total desplazada. La idea es que una imagen se muestre a intervalos regulares a lo largo de toda la página.

En este momento, tengo el siguiente código que se basa en la cantidad de píxeles desplazados. Pero como esto no funciona en diferentes dispositivos, no es adecuado para mi idea. ¿Alguien sabría cómo retomar lo que tengo a continuación y convertirlo en un porcentaje de toda la página?

¡Gracias!

 $("#c1").fadeIn(500); $(document).scroll(function () { var pos = $(document).scrollTop(); if (pos < 500) { hideAll("c1"); $("#c1").fadeIn(500); } if (pos > 1000 && pos < 1500) { hideAll("c2"); $("#c2").fadeIn(500); } if (pos > 2000 && pos < 2500) { hideAll("c3"); $("#c3").fadeIn(500); } if (pos > 3000 && pos < 3500) { hideAll("c4"); $("#c4").fadeIn(500); } if (pos > 4000 && pos < 4500) { hideAll("c5"); $("#c5").fadeIn(500); } if (pos > 5000 && pos < 5500) { hideAll("c6"); $("#c6").fadeIn(500); } if (pos > 6000 && pos < 6500) { hideAll("c7"); $("#c7").fadeIn(500); } if (pos > 7000 && pos < 7500) { hideAll("c8"); $("#c8").fadeIn(500); } if (pos > 8000 && pos < 8500) { hideAll("c9"); $("#c9").fadeIn(500); } if (pos > 9000 && pos < 9500) { hideAll("c10"); $("#c10").fadeIn(500); } if (pos > 10000 && pos < 10500) { hideAll("c11"); $("#c11").fadeIn(500); } if (pos > 11000 && pos < 11500) { hideAll("c12"); $("#c12").fadeIn(500); } if (pos > 12000 && pos < 12500) { hideAll("c13"); $("#c13").fadeIn(500); } if (pos > 13000 && pos < 13500) { hideAll("c14"); $("#c14").fadeIn(500); } if (pos > 14000 && pos < 14500) { hideAll("c15"); $("#c15").fadeIn(500); } }); function hideAll(exceptMe) { $(".bg").each(function (i) { if ($(this).attr("id") == exceptMe) return; $(this).fadeOut(); }); }