Javascript et transition : affichage quand on affiche l'élément (scroll)

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:

---

.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:

---

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 !

Code:

---

1 2 3

<div class='ladiv'> Ma Div </div>

---

Code:

---

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:

---

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"); }); });

---

MERCIIIIII Beaucoup !!!

avec plaisir, bonne continuation.