Bonjour à tous!
Je viens à vous car j'ai un problème conditions. Après avoir lu et relu de la doc et aides sur différents forums, je me décide finalement à poster.
Dans les fait c'est très simple.
- J'ai plusieurs rubriques sur mon site web en "One page".
- Il y a une rubrique par page.
- A chaque fois que je change de page, je souhaite changer l'image de ma rubrique de manière dynamique. Elle doit juste se griser, je charge donc une image grise.
- Elle doit devenir grise quand je slide vers le haut
- Elle doit devenir grise quand je slide vers le bas
- Quand le slide est terminé, l'image se colore
Vous pouvez voir ce que j'essaye de faire directement sur mon site : juste ici.
On peut prendre comme exemple mon logo qui fait quasiment la même chose, mais l'image de transition qui se joue pendant le slide est LA MÊME PARTOUT. Du coup c'est pas trop casse tête. En revanche pour mes rubriques, c'est pas pareil, elles sont toutes différentes.
Je vous donne donc mon Jquery et vous invite à inspecter ou obtenir le code source pour avoir le html!
Je vous remercie de votre aide par avance, je ne sais plus quoi faire
Ne me taclez pas trop, je sais que mon code est clairement imparfait . Je suis en plein apprentissage!
Modifié par borg80 (03 Oct 2016 - 16:28)
Je viens à vous car j'ai un problème conditions. Après avoir lu et relu de la doc et aides sur différents forums, je me décide finalement à poster.
Dans les fait c'est très simple.
- J'ai plusieurs rubriques sur mon site web en "One page".
- Il y a une rubrique par page.
- A chaque fois que je change de page, je souhaite changer l'image de ma rubrique de manière dynamique. Elle doit juste se griser, je charge donc une image grise.
- Elle doit devenir grise quand je slide vers le haut
- Elle doit devenir grise quand je slide vers le bas
- Quand le slide est terminé, l'image se colore
Vous pouvez voir ce que j'essaye de faire directement sur mon site : juste ici.
On peut prendre comme exemple mon logo qui fait quasiment la même chose, mais l'image de transition qui se joue pendant le slide est LA MÊME PARTOUT. Du coup c'est pas trop casse tête. En revanche pour mes rubriques, c'est pas pareil, elles sont toutes différentes.
Je vous donne donc mon Jquery et vous invite à inspecter ou obtenir le code source pour avoir le html!
Je vous remercie de votre aide par avance, je ne sais plus quoi faire
$(window).scroll(function(){
if ( $(window).scrollTop() > position1 ){
$('.img-container').attr('src','../portfolio/imgs/rubriques/accueilgrey.jpg');
}
else if ( $(window).scrollTop() > position1 || $(window).scrollTop() < position2 ){
$('.img-container').attr('src','../portfolio/imgs/rubriques/nikka-whiskygrey.jpg');
}
else if ( $(window).scrollTop() > position2 || $(window).scrollTop() < position3 ){
$('.img-container').attr('src','../portfolio/imgs/rubriques/diorgrey.jpg');
}
else if ( $(window).scrollTop() > position3 || $(window).scrollTop() < position4 ){
$('.img-container').attr('src','../portfolio/imgs/rubriques/japangrey.jpg');
}
else if ( $(window).scrollTop() > position4 || $(window).scrollTop() < position5 ){
$('.img-container').attr('src','../portfolio/imgs/rubriques/amourgrey.jpg');
}
else {
$('.img-container').attr('src','../portfolio/imgs/rubriques/illustrationgrey.jpg');
}
});
Ne me taclez pas trop, je sais que mon code est clairement imparfait . Je suis en plein apprentissage!
Modifié par borg80 (03 Oct 2016 - 16:28)