11521 sujets

JavaScript, DOM et API Web HTML5

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 Smiley decu


	$(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 Smiley murf . Je suis en plein apprentissage!
Modifié par borg80 (03 Oct 2016 - 16:28)