11548 sujets

JavaScript, DOM et API Web HTML5

JQuery - Arriere-plan en mouvement

Eh bien tu reprends ce code qui somme toute est très simple, tu vires la moitié qui ne t'intéresse pas, tu fais une modif ou deux, et voilà. Smiley smile

Ils utilisent jQuery mais ça ne devrait pas être nécessaire ici.

// height of background image in pixels
var backgroundheight = 1000;

// set which pixel row to start graphic from
var offset = 0;

function scrollbackground() {
  // decrease the offset by 1, or if its less than 1 increase it by
  // the background height minus 1
  offset = (offset < 1) ? offset + (backgroundheight - 1) : offset - 1;
  // apply the background position
  document.getElementById('un-element').style.backgroundPosition = "50% " + offset + "px";
  // call self to continue animation
  setTimeout(function() {
      scrollbackground();
    }, 100
  );
}

// Start the animation
// (Execute on DomReady!)
scrollbackground();


Il y a encore des adaptations à faire, car le type de déplacement (vertical ou horizontal, positif ou négatif, sur quel élément ça s'applique, avec quelle vitesse) est codé en dur dans la fonction scrollbackground. Donc c'est à adapter à ton cas, puis à tester.
Un avertissement tout de même: la page d'exemple donnée est assez catastrophique, avec un poids de 1200+ko (dont 400ko pour l'image de fond principale) et un effet d'animation qui fait facilement monter le CPU à 100% et peut mettre à genoux les navigateurs avec des performances JS pas terribles (Internet Explorer...), les machines pas super puissantes et dernier cri, les smartphones (puissance et mémoire très limitée), etc. C'est vraiment un cauchemard pour les performances client cet effet, au moins tel que réalisé sur le site d'exemple. Moi j'éviterais ça comme la peste.
Oui, c'est également ce que beaucoup de gens faisaient remarquer en réaction à ce design. Dans mon cas c'est intéressant parce que d'une part mon image sera beaucoup plus légère, et d'autre part ça s'adresse à de l'intranet. Le temps de chargement est donc très rapide, et je sais exactement quelles machines et navigateurs vont être utilisés.

Merci pour ton code.
Suite à vos conseils il y a quelques semaines, je me suis mis à JQuery, et je ne regrette pas. j'ai vraiment l'impression d'avoir fait un pas de géant dans le web. En revanche, du javascript "pur", c'est encore un peu chaud pour moi, mais je vais tout de même essayer d'utiliser ton code Smiley smile
Bon, ça ne marche pas. je comprends pas ce que je fais mal. J'ai copié-collé ton code, en remplaçant juste l'élément concerné, et rien ne bouge.

J'ai aussi retenté via JQuery de faire ça :
$('document').ready(function() {
 $('#bloc_test').animate({backgroundPosition: '(150px 250px)'; 		 
});

mais là encore, échec...
Tu as tenu compte de ça?
// (Execute on DomReady!!!!!!!!!!!!) 
scrollbackground();
ou en fait non?

PS: j'avais dit qu'il fallait adapter. Smiley cligne
Modifié par Florent V. (13 Nov 2009 - 19:13)
Euh... non.
Je suis censé faire quoi ?

Florent V. a écrit :
PS: j'avais dit qu'il fallait adapter. Smiley cligne

Oui, je pensais pas que ça concernait ce petit machin aussi...
Modifié par Ralf (13 Nov 2009 - 19:44)
Ralf a écrit :
Je suis censé faire quoi ?

Il faut enregistrer un gestionnaire d'évènement qui va exécuter ta fonction d'animation lorsque l'évènement domready se déclenche. À défaut, on peut associer l'exécution de la fonction au chargement complet de la page (window.onload).

On peut lire les détails ici:
http://www.javascriptkit.com/dhtmltutors/domready.shtml

À cause de problèmes de compatibilité (et notamment d'IE), on ne dispose pas d'évènement DOMContentLoaded facilement utilisable partout. Le plus simple est donc de disposer d'un script qui permet de gérer ça automatiquement. Si tu utilises jQuery, ça tombe bien, c'est une fonction native:
jQuery(document).ready(function(){
  // Ici le code à exécuter une fois que l'arbre DOM est construit
});


Ralf a écrit :
Oui, je pensais pas que ça concernait ce petit machin aussi...

Ce petit machin est, malgré une relative complexité (le DOM, les gestionnaires d'évènement, les différences d'implémentation), le B.A.-ba de JavaScript. Smiley cligne
Modifié par Florent V. (13 Nov 2009 - 21:08)
Sujet clos
Aller à