11486 sujets

JavaScript, DOM et API Web HTML5

Apparition d'image au scroll jQuery

Bonjour à toutes et à tous !

Besoin d'un coup de pouce.. J'aimerai avoir un effet d'apparition d'image au scroll mais que l'image apparaît seulement quand elle est visible à l'écran.

La actuellement j'ai ajouté ce script (en exemple) :

// APPARITION DES IMAGES AU SCROLL //
$(document).ready(function(){
    $(this).scroll(function(){
      if ($(this).scrollTop() < 500)
      {
        $("#Image01").fadeOut(1500);
        $("#Image02").fadeOut(1500);
      }
	  $(this).scroll(function(){
      if($(this).scrollTop() < 1000)
      {
        $("#Image03").show(1500);
        $("#Image04").show(1500);
        $("#Image05").show(1500);
      }
    $(this).scroll(function(){
      if($(this).scrollTop() < 1500)
      {
        $("#Image06").show(1500);
        $("#Image07").show(1500);
      }
    });
});




<!-- Les images 01 / 02 sont cote à cote -->
<img id="Image01" src="https://i1.wp.com/repair-phone.flavv.fr/wp-content/uploads/2016/05/NE-JETER-PLUS-2.1.png?resize=630%2C84" hidden />
<img id="Image02" src="https://i1.wp.com/repair-phone.flavv.fr/wp-content/uploads/2016/05/NE-JETER-PLUS-2.1.png?resize=630%2C84" hidden />
<!-- Autres éléments -->
<!-- Les images 03 / 04 / 05 sont cote à cote -->
<img id="Image03" src="https://i1.wp.com/repair-phone.flavv.fr/wp-content/uploads/2016/05/NE-JETER-PLUS-2.1.png?resize=630%2C84" hidden />
<img id="Image04" src="https://i1.wp.com/repair-phone.flavv.fr/wp-content/uploads/2016/05/NE-JETER-PLUS-2.1.png?resize=630%2C84" hidden />
<img id="Image05" src="https://i1.wp.com/repair-phone.flavv.fr/wp-content/uploads/2016/05/NE-JETER-PLUS-2.1.png?resize=630%2C84" hidden />
<!-- Autres éléments -->
<!-- Les images 06 / 07 sont cote à cote -->
<img id="Image06" src="https://i1.wp.com/repair-phone.flavv.fr/wp-content/uploads/2016/05/NE-JETER-PLUS-2.1.png?resize=630%2C84" hidden />
<img id="Image07" src="https://i1.wp.com/repair-phone.flavv.fr/wp-content/uploads/2016/05/NE-JETER-PLUS-2.1.png?resize=630%2C84" hidden />


Mais le site étant élastique, les images apparaissent toutes en même temps..

Un coup de pouce serai le bien venu !

Merci à vous
Sujet clos
Aller à