11492 sujets

JavaScript, DOM et API Web HTML5

Bonjour,
Je souhaite utiliser le plugin isInView ici : http://www.creativejuiz.fr/blog/tutoriels/jquery-inview-plugin-elements-visibles-a-ecran
Pour rajouter une class "show" à chaque fois que je commence un effet parallax. (J'ai 3 passages en parallax). L'idée est d'animer le texte d'un parallax en même temps que l'effet parallax commence. Comme ici
Ca me parait correct pourtant. Mais certainement je me trompe quelque part.

Voir code ci-dessous :

HTML :


<div id="parallax1">
	
		<div class="slide_inside">			
	  Texte 1	+ img en background
		</div> <!--.slide_inside-->	 
						
</div> <!--#parallax1-->
	
	
<div id="parallax2">
		
		<div class="slide_inside">
		
			  Texte 2	+ img en background
						
                </div> <!--.slide_inside-->	     	
	    
</div> <!--#parallax2-->
	
	
<div id="parallax3">
	
		<div class="slide_inside">			

			  Texte 3	+ img en background
			
		</div> <!--.slide_inside-->	    

</div> <!--#parallax3-->

Le JS



$(document).ready(function(){
   $('.element').bind('inview', function(event, isInView, visiblePartX, visiblePartY) {
 
      if (isInView) {
         // l'élément est visible
 
         if (visiblePartY == 'top') {
            // Le haut de l'élément est visible
            $(this).find('.slide_inside').addClass('show');
         } 
 
         else if (visiblePartY == 'bottom') {
            // Le bas de l'élément est visible
            $(this).find('.slide_inside').addClass('hide');
         } 
 
         else {
            // Les deux parties sont visibles (tout l'élément)
            $(this).find('.slide_inside').addClass('show');
         }
      } 
 
      else {
         // l'élément n'est pas visible
         // on fait quoi maintenant ?
      }
   });
});

Modifié par dreadstock (13 May 2015 - 14:48)