Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1712 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Changer le fond d'écran à intervalle régulier

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Changer le fond d'écran à intervalle régulier

n°2278993
Kortex@HFR
Qu'ils sont cons ces lamas !!!
Posté le 06-04-2016 à 08:58:16  profilanswer
 

Bonjour à tous,
 
Je cherche à changer le fond d'écran de ma page Web à intervalle régulier, avec un effet de transition défilement horizontal de la droite vers la gauche. Je trouve des exemples de code pour faire défiler des images dans un bloc DIV ou autre, mais pas tout le fond d'écran. Et vue que je ne suis pas doué en JS/CSS, je n'arrive pas à adapter le code pour mon besoin :/
 
Vous auriez un exemple que je puisse reprendre ?
 
Merci d'avance :)


---------------
Au coeur du swirl - Mon feed
mood
Publicité
Posté le 06-04-2016 à 08:58:16  profilanswer
 

n°2279008
rufo
Pas me confondre avec Lycos!
Posté le 06-04-2016 à 10:22:13  profilanswer
 

Il suffit, dans ton code HTML, que la div que tu mettras juste après le body porte l'image de fond d'écran et que cette div ait une largeur et hauteur de 100%. Après, un petit coup de javascript pour qu'à intervalle régulier, l'image change (tu fais un tableau d'url d'images). Pour la transition, faudra aussi du javascript pour gérer les fondus.


---------------
Astres, outil de help-desk GPL : http://sourceforge.net/projects/astres, ICARE, gestion de conf : http://sourceforge.net/projects/icare, Outil Planeta Calandreta : https://framalibre.org/content/planeta-calandreta
n°2279013
Kortex@HFR
Qu'ils sont cons ces lamas !!!
Posté le 06-04-2016 à 10:50:05  profilanswer
 

J'essaie de mettre ta solution en pratique. Problème : quand je mets mon DIV pour placer l'image, elle décale tout vers le bas :( Je dois mettre quoi comme position pour que tout passe par dessus le DIV d'image de fond ?
 
Trouvé :) Maintenant, trouver comment adpater l'image au DIV vu qu'elle est plus grosse que la taille de l'écran (volontaire).
 
Fait. Maintenant, changer l'image à intervalle régulier.


Message édité par Kortex@HFR le 06-04-2016 à 11:13:38

---------------
Au coeur du swirl - Mon feed
n°2279030
Kortex@HFR
Qu'ils sont cons ces lamas !!!
Posté le 06-04-2016 à 12:08:32  profilanswer
 

J'essaie de faire la chose suivante :
 
window.onload = setInterval(setBackground(), 5000);
 
L'image est bien chargée une première fois, mais ne bouge plus après :(
 
Quel est le problème ?


---------------
Au coeur du swirl - Mon feed
n°2279039
rufo
Pas me confondre avec Lycos!
Posté le 06-04-2016 à 13:39:23  profilanswer
 

Il faut que dans la fonction setBackground(), tu relances le timer avec un setInterval() ;)


---------------
Astres, outil de help-desk GPL : http://sourceforge.net/projects/astres, ICARE, gestion de conf : http://sourceforge.net/projects/icare, Outil Planeta Calandreta : https://framalibre.org/content/planeta-calandreta
n°2279042
Kortex@HFR
Qu'ils sont cons ces lamas !!!
Posté le 06-04-2016 à 13:46:34  profilanswer
 

Je m'y suis pris de la manière suivante pour faire tourner les images en boucle :

 
Code :
  1. var imagediaporama = 0;
  2. function setBackground(){
  3.  imagediaporama++;
  4.  document.getElementById('background').style.backgroundImage = 'url("./images/diaporama0'+imagediaporama+'.jpg" )';
  5.  if (imagediaporama > 2 ) {
  6.   imagediaporama = 0;
  7.  }
  8.  setTimeout(function() {setBackground() }, 2000);
  9. }
  10. window.onload = setBackground();
 

Ca fonctionne :) Maintenant, comment faire pour que la transition se fasse de la droite vers la gauche ? Vous auriez un bout de code tout fait ?


Message édité par Kortex@HFR le 06-04-2016 à 13:50:31

---------------
Au coeur du swirl - Mon feed
n°2279043
SICKofitAL​L
misanthrope
Posté le 06-04-2016 à 13:47:29  profilanswer
 

Kortex@HFR a écrit :

J'essaie de faire la chose suivante :
 
window.onload = setInterval(setBackground(), 5000);
 
L'image est bien chargée une première fois, mais ne bouge plus après :(
 
Quel est le problème ?


En faisant ca, tu executes la fonction "setBackground" et c'est sur le retour de cette derniere que cyclera setInterval
Essayes ca :

Code :
  1. var setBackground = function ()
  2. {
  3.   // ...
  4.   // ... ton code
  5.   // ...
  6.   // au lieu de faire un setInterval qui va relancer la même fonction ad infinitum, tu la relances "manuellement",
  7.   // comme ca tu évites les "boucles infinies" en cas d'erreur
  8.   setTimeout (setBackground, 5000);
  9. }
  10. window.onload = function ()
  11. {
  12.   setTimeout (setBackground, 5000);
  13. }


Message édité par SICKofitALL le 06-04-2016 à 13:59:51

---------------
We deserve everything that's coming...
n°2279044
SICKofitAL​L
misanthrope
Posté le 06-04-2016 à 13:51:37  profilanswer
 

Argh, grillled :D
 
Essaye :

Code :
  1. imagediaporama++;
  2. imagediaporama &= 2;


 
et ca marche aussi dans l'autre sens, càd avec imagediaporama--
 
EDIT :
Plus "propre" peut-être, en feintant avec les modulos, et permettre ainsi de gerer les chiffres positifs mais aussi négatifs (càd dans ton cas -1) :

Code :
  1. Number.prototype.mod = function (n) { return ((this % n) + n) % n; };


Message édité par SICKofitALL le 06-04-2016 à 14:03:39

---------------
We deserve everything that's coming...
n°2283030
sodimel
rfe raw drah !
Posté le 05-06-2016 à 02:32:39  profilanswer
 

Je l'ouvre juste pour proposer une solution en full css  :)
 
Alors en faisant juste une ptite recherche jsuis tombé sur cet article (avec des démos o/), et du coup bah ça a l'air plus joli à implémenter que le javascript :D


---------------
l3m - twinoid - bmc
n°2283489
chrispc
T'es tendue Natasha !
Posté le 10-06-2016 à 23:03:36  profilanswer
 

Regardes du côté du keyframes en CSS.
 
Tu peux faire une sorte de carrousel qui te permettra de faire ton effet.
J'ai pas d'exemple là pour te montrer le code


---------------
L'écoconception n'est pas négociable - Topic habitats de demain : https://tinyurl.com/y5h2mjx7
mood
Publicité
Posté le 10-06-2016 à 23:03:36  profilanswer
 

n°2283492
Kortex@HFR
Qu'ils sont cons ces lamas !!!
Posté le 11-06-2016 à 01:04:28  profilanswer
 

Je m'en suis sorti en faisant un effet d'alpha en JS/CSS, c'était pas exactement ce que je voulais faire à la base (transition en slide) mais ça fait son taf et c'est plus mal finalement. En tout cas, ça m'a bien fait évoluer sur la compréhension des empilage de calque et le positionnement en CSS, c'est cool :)


---------------
Au coeur du swirl - Mon feed

Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Changer le fond d'écran à intervalle régulier

 

Sujets relatifs
Changer les données affichées sur une page Web! UP ! VBScript Changer une imprimante par défaut grâce à son IP
Changer la valeur d'un champs par choix multipleChanger le champs d'un enregistrement d'une table
[resulu]Changer de répertoire courant sans shell sur Gnu/Linux.script steam big picture + écran secondaire
Changer couleur bouton selon variableprogramme un écran à led
changer le nom table dans ma pageConvertir un fichier Swf en fichier pour "écran de veille sous Windows
Plus de sujets relatifs à : Changer le fond d'écran à intervalle régulier


Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR