Discussion :

[Alexcontact]

Bonjour à tous,

J'ai une <div> en fin de page et j'aimerais avoir un effet sur cette div qui s'affiche en dégradé (opacité 0 vers 100%)

J'ai ce script en css

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

.ladiv{width:46%;float:left;margin:5px 2%;opacity:0;-webkit-transition:opacity 2s ease-in;-moz-transition:opacity 2s ease-in;-o-transition:opacity 2s ease-in;-ms-transition: opacity 2s ease-in;transition: opacity 2s ease-in;}

Et j'ai ce code en js :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 $(function() {
        $(".ladiv").addClass("load");
    });

Seulement vu que cette div est en fin de page, l'effet s'active mais on ne peux pas le voir vu que l'effet se passe quand on est en haut de page.
Et j'aimerais que l'effet se passe quand on scrool et qu'on arrive à l’élément en question.

Je pense qu'il faut rajouter une fonction dans le JS, mais comment faire ? Que rajouter ?

Un GRAND merci !

[Toufik83]

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<div class='ladiv'>
Ma Div 
</div>

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
body{height:900px}/*j'ai mis ça juste pour avoir le scroll */
.ladiv{width:46%;float:left;bottom:0;position:absolute;
margin:5px 2%;opacity:0;-webkit-transition:opacity 2s ease-in;-moz-transition:opacity 2s ease-in;-o-transition:opacity 2s ease-in;-ms-transition: opacity 2s ease-in;transition: opacity 2s ease-in;}
.load{opacity:1}/* ajout de la class load */

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
$(function() {
	$(window).scroll(function(){
          var position=parseInt($(document).height()
                              -$(window).height()
                              +$(window).scrollTop())
      ,Elem=$(".ladiv");
      if(position>=parseInt(Elem.offset().top))
        	$(".ladiv").addClass("load");
      });
});

[Alexcontact]

MERCIIIIII Beaucoup !!!

[Toufik83]

avec plaisir, bonne continuation.