Effet d'affichage entre chaque post déclencher au "scroll"

Bonjour !

Je travail actuellement sur mon site web utlisant le Wordpress : http://www.pastelpurpleshadow.fr/

J'aimerais faire un effet de transition entre chaque post, un peu comme ici : https://www.apple.com/fr/iphone-6/
Mais avoir un effet de fondu, et pas que les posts soient affiché simplement.

On m'a dit d'utiliser un script JQuery, mais aussi le déclencher au "scroll" quelque chose que je ne sais pas faire.

Pourriez vous m'aider a gerer ceci ?

(Je vois qu'il faut que j'applique ce script a ma class : post-content)

Voila, demandez plus de précision si jamais vous n'avez pas compris :) !

Merci


J'ai trouvé ceci : http://www.w3schools.com/jquery/jquery_fade.asp
Mais je ne sais pas comment je vais l'implementer pour qu'il se declenche quand je regarde le post.

Bonjour,
teste si ton post entre dans la fenêtre d'affichage et si c'est le cas tu fageIn.

Yop!

Citation:

---

Envoyé par Naografix

Mais je ne sais pas comment je vais l'implementer pour qu'il se declenche quand je regarde le post.

---

En Jquery, tu peux utiliser une fonction sur l'événement scroll, probablement celui de la fenêtre:

Code:

---

1 2 3

$(window).scroll(function(){ ... });

---

Pour savoir de combien tu as scrollé, tu as

Code:

---

$("html").scrollTop()

---

Un petit test entre cette valeur et le sommet de ton post te dira s'il entre dans la fenêtre

Code:

---

$("#ton-post").position().top

---

Moi je dirais plutôt

Code:

---

$("#ton-post").offset().top

---

car si on en croit la doc (je traduis à peu près) :

Citation:

---

La méthode .position() nous permet de récupérer la position actuelle d'un élément par rapport à son offset parent. Opposez ceci à .offset(), qui récupère la position actuelle par rapport au document.

http://api.jquery.com/position/

---

Il est important de stocker cette valeur dans une variable en-dehors de la fonction de gestion du scroll, car l'évènement scroll a lieu plusieurs fois par secondes et la méthode .offset() (tout comme .position()) provoque des recalculs graphiques (reflows). L'appeler trop souvent aurait un fort impact sur la fluidité de l'affichage (un phénomène appelé layout thrashing par les anglophones).