11564 sujets

JavaScript, DOM et API Web HTML5

Changer de logo au Scroll

Bonjour,
J'ai un header en position:fixed. Je souhaiterais charger une nouvelle image pour mon logo, quand l'internaute aura scrollé environ 60% de l'écran vers le bas.
Je ne sais pas trop comment faire. Je pense qu'il faut intervenir sur du JS ?
Avez vous un tuto ou un peu d'aide ?
Merci par avance
Salut,

Effectivement il faudra passer par JS. Avec jQuery c'est relativement simple. Voici la marche à suivre :
- détecter le scroll (http://api.jquery.com/scroll/)
- pendant le scroll exécuter une condition (if ou autre);
- si tu es descendu de 300px (par exemple) (http://api.jquery.com/scrollTop/)
- tu changes l'attribut src de ton image (http://api.jquery.com/attr/), ou tu fais un traitement en CSS en ajoutant une class (http://api.jquery.com/addClass/)

Bonne chance Smiley lol
Top, merci avec ton aide j'ai trouver une solution. Voici mon code pour ceux que cela intéresse : 

$(document).scroll( function() {
    if($(document).scrollTop()>300){
        $("#logoscroll").attr({src: "http://www.example.com/img/logopetit.jpg",});
    }else{
        $("#logoscroll").attr({src: "http://www.example.com/img/logogrand.jpg",});
    }
} );


Je n'ai cependant pas pu faire 2 choses. Impossible de trouver.

Mettre du php dans le javascript pour récupérer l'url, sans la mettre en dur. (le php est un langage serveur et pas client, normal Smiley smile ) mais je n'ai pas de solution.

J'aurai aimé également mettre un petit effet Fade ou autre sympa. Mais je ne sais pas ou le mettre.

Mais c'est déjà top merci.
Mhhh, pour l'URL ça dépend un peu de ton architecture et des techno que tu utilises.

Rapidement tu pourrais faire un truc du genre (je dis pas que c'est propre hien ^^) dans ton doc HTML :
<script>
var const : {
    urlLogo1 : <?php echo $tonURLServeurImg1 ?> ,
    urlLogo2 : <?php echo $tonURLServeurImg2 ?> ,
}
</script>

Ensuite dans ton script tu remplaces la valeur de ton attribut src par un const.urlLogo2, par exemple.

Pour le fadeIn FadeOut, il faut juste un peu étoffer ce qu'il y a à l'intérieur de ton if, avec un peu de setTimeout/delay().

genre dans ton if:
- tu ajoutes ta class CSS sur logoScroll (genre .inactive {opacity: 0} en oubliant pas de mettre une transition);
- après tu attends la fin la fin de la transition css avec delay(300);
- ensuite tu change ton attr;
- et enfin tu réaffiches le logo en supprimant la class .inactive.

Tout ça peut être écrit en une ligne (oui jQuery c'est bien des fois ^^), bonne chance !
Sujet clos
Aller à