image de fond d'une div en diaporamaRésolu/Fermé

Question

Bonjour, 
Je veux faire de quatre images difféfferentes le fond de ma div, leurs permettant de defiler à tour de rôle pendant 10 à 15 secondes.. Mais je sais pas comment m'y prendre ou du moins j'y arrive pas. 
Merci de m'aider !

Configuration: Windows XP / Firefox 27.0

animostab · Answer

Salut avec @keyframes c'est possible ne marche pas sous IE9 et inférieur donc ces navigateurs afficheront uniquement la 1ere image voici la méthode tu fais une seule image des tes 4 images mises l'une après l'autre horizontalement, comme une pellicule de cinéma mais horizontalement. dans l'exemple on imagine que tes 4 images font 100px X 100px tu en fais donc une seule image de 400px X 100px ensuite le html

et le css @keyframes slide{ 0%{background-position:0px 0px;} 20%{background-position:0px 0px;} 25%{background-position:100px 0px;} 45%{background-position:100px 0px;} 50%{background-position:200px 0px;} 55%{background-position:300px 0px;} 75%{background-position:300px 0px;} 80%{background-position:300px 0px;} 85%{background-position:400px 0px;} 95%{background-position:400px 0px;} 100%{background-position:0px 0px;} } #slide { animation: slide linear 60s infinite; width:100px; height:100px; background-image:url(imagequidefile.jpg); border:1px solid red; /**optionnel**/ } sinon tu as toujours la solution d'un slider jquery mais ce ne sera pas des images de fond n'oublie pas de faire la même déclaration css de @keyframes et de animation avec les préfixes vendeurs -o- pour Opera -moz- pour Gecko (Mozilla) -webkit- pour Webkit (Chrome, Safari, Android...) -ms- pour Microsoft (Internet Explorer) -khtml- pour KHTML (Konqueror) comme cela par exemple @-moz-keyframes -moz-animation Un petit merci vaut mieux qu'une grande ignorance ! Donc si votre sujet est résolu une réponse avec merci c'est pas de refus.

animostab · Answer

dans le css fais c'est la meme chose mais avec les préfixes vendeur
https://www.journaldunet.com/web-tech/developpeur/1055046-les-prefixes-vendeurs-en-css/

@-moz-keyframes slide{
0%{background-position:0px 0px;}
20%{background-position:0px 0px;}
25%{background-position:100px 0px;}
45%{background-position:100px 0px;}
50%{background-position:200px 0px;}
55%{background-position:300px 0px;}
75%{background-position:300px 0px;}
80%{background-position:300px 0px;}
85%{background-position:400px 0px;}
95%{background-position:400px 0px;}
100%{background-position:0px 0px;}
}

@-o-keyframes slide{
0%{background-position:0px 0px;}
20%{background-position:0px 0px;}
25%{background-position:100px 0px;}
45%{background-position:100px 0px;}
50%{background-position:200px 0px;}
55%{background-position:300px 0px;}
75%{background-position:300px 0px;}
80%{background-position:300px 0px;}
85%{background-position:400px 0px;}
95%{background-position:400px 0px;}
100%{background-position:0px 0px;}
}

@-webkit-keyframes slide{
0%{background-position:0px 0px;}
20%{background-position:0px 0px;}
25%{background-position:100px 0px;}
45%{background-position:100px 0px;}
50%{background-position:200px 0px;}
55%{background-position:300px 0px;}
75%{background-position:300px 0px;}
80%{background-position:300px 0px;}
85%{background-position:400px 0px;}
95%{background-position:400px 0px;}
100%{background-position:0px 0px;}
}

@-ms-keyframes slide{
0%{background-position:0px 0px;}
20%{background-position:0px 0px;}
25%{background-position:100px 0px;}
45%{background-position:100px 0px;}
50%{background-position:200px 0px;}
55%{background-position:300px 0px;}
75%{background-position:300px 0px;}
80%{background-position:300px 0px;}
85%{background-position:400px 0px;}
95%{background-position:400px 0px;}
100%{background-position:0px 0px;}
}

@-khtml-keyframes slide{
0%{background-position:0px 0px;}
20%{background-position:0px 0px;}
25%{background-position:100px 0px;}
45%{background-position:100px 0px;}
50%{background-position:200px 0px;}
55%{background-position:300px 0px;}
75%{background-position:300px 0px;}
80%{background-position:300px 0px;}
85%{background-position:400px 0px;}
95%{background-position:400px 0px;}
100%{background-position:0px 0px;}
}

@keyframes slide{
0%{background-position:0px 0px;}
20%{background-position:0px 0px;}
25%{background-position:100px 0px;}
45%{background-position:100px 0px;}
50%{background-position:200px 0px;}
55%{background-position:300px 0px;}
75%{background-position:300px 0px;}
80%{background-position:300px 0px;}
85%{background-position:400px 0px;}
95%{background-position:400px 0px;}
100%{background-position:0px 0px;}
}


#slide {
-moz-animation: slide linear 60s infinite;
-o-animation: slide linear 60s infinite;
-webkit-animation: slide linear 60s infinite;
-khtml-animation: slide linear 60s infinite;
-ms-animation: slide linear 60s infinite;
animation: slide linear 60s infinite;
width:100px;
height:100px;
background-image:url(imagequidefile.jpg);
border:1px solid red; /**optionnel**/
}

Stanislas Poisson · Answer

Bonjour,

Ce que t'as donner animostab fonctionne parfaitement via du css et donc avec les navigateurs compatibles avec les keyframes.

Pour savoir si une règles css est compatible avec les navigateurs que tu vise, utilise les site caniuse qui indique si oui et comment (prefixe ou non) la commande est compatible. Ex: Keyframes: https://caniuse.com/#search=keyframes
Keyframes compatible:
Fixe:
IE 10
Firefox 26.0
Chrome 31.0 avec prefixe -webkit-
Safari 7.0 avec prefixe -webkit-
Opera 19.0 avec prefixe -webkit-

Mobile:
iOs Safari avec prefixe -webkit-
Opera Mobile aucun support
Android Browser 2.1 avec prefixe -webkit-
BlackBerry Browser 7.0 avec prefixe -webkit-
IE Mobile 10 

L'autre option consiste à utilise du javascript (natif ou via jQuery/Zepto/...) qui lui aussi affichera uniquement la premiere image si le javascript n'est pas activé. Si cela t'interesse, je te préparerais un petit script en fonction de ton framwork JavaScript

Cordialement.

Image de fond d'une div en diaporama

3 réponses

Discussions similaires

Newsletters