Image de fond d'une div en diaporama

Résolu

penati17 Messages postés 33 Date d'inscription Statut Membre Dernière intervention -
penati17 Messages postés 33 Date d'inscription Statut Membre Dernière intervention - 3 mars 2014 à 10:25

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 !

A voir également:

Image de fond d'une div en diaporama
Comment mettre une vidéo en fond d'écran - Guide
Enlever le fond d'une image - Guide
Image iso - Guide
Légender une image - Guide
Mettre une image en fond sur word sur une seule page - Guide

3 réponses

Réponse 1 / 3

animostab Messages postés 2829 Date d'inscription Statut Membre Dernière intervention 738

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

<div id="slide">
</div>

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.

penati17 Messages postés 33 Date d'inscription Statut Membre Dernière intervention

Merci pour ta disponibilité.... Mais je comprends pas trop bien quand tu me dit:

"" 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 ""

Merci de me comprendre, j'ai besoin d'explication; c'est la première fois que j'entends parler !

Réponse 2 / 3

animostab Messages postés 2829 Date d'inscription Statut Membre Dernière intervention 738

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**/
}

penati17 Messages postés 33 Date d'inscription Statut Membre Dernière intervention

Merci infiniment animostab... très précieuse aide !!!
Je me met à la tache !

Réponse 3 / 3

Stanislas Poisson Messages postés 424 Date d'inscription Statut Membre Dernière intervention 66

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.

penati17 Messages postés 33 Date d'inscription Statut Membre Dernière intervention

bien sûr je suis preneur, même si je ne suis pas encore entrain d'apprendre du java (j'suis q'au stade du php/html).
merci d'avance.

Discussions similaires

PIX

Dechiffrer une image caché

Y a t-il une âme charitable pour m'aider ??

Retrouver l'image originale après avoir fait des modifications ?

Votre réponse

Discussions similaires