-
Diapo 10c
Le dernier code proposé me paraît modifiable sans trop à se prendre la tête alors, je reviens sur sa construction.
Le voici pour rappel:
<div id="fondu"> </div>
<style><!--
#fondu{position:relative; width:800px; height:450px; margin:30px auto; text-align:left; border:6px ridge white; box-shadow:4px 4px 6px black; animation:fondu 18s ease-in-out infinite both;animation-play-state:running;}
#fondu:hover{animation-play-state:paused;}
@keyframes fondu{
0%{background-image:url('http://ekladata.com/_4_a7I_SOYzlKVYry9Y98cbJl1Y@800x450.jpg');}
20%{background-image:url('http://ekladata.com/Ds0gwI5glVSdMD9XD0tTKefzY_o@800x450.jpg');}
40%{background-image:url('http://ekladata.com/IryqRhbvxuFWs7W3uRUMW06T8rg@800x450.jpg');}
60%{background-image:url('http://ekladata.com/kibulpTYU-PIMLaTRsGzebk28BU@800x450.jpg');}
80%{background-image:url('http://ekladata.com/PgqRfFBmZF8sKSaDwteu0L6IsFs@800x450.jpg');}
100%{background-image:url('http://ekladata.com/PgqRfFBmZF8sKSaDwteu0L6IsFs@800x450.jpg');}}
--></style>1/ Il faut savoir copier l'adresse des images hébergées.
2/ Il faut savoir utiliser l'éditeur de texte de votre PC, pour copier les codes html et adresses et JAMAIS sur une feuille de traitement de texte (Word, Open Office...).
3/ Il faut savoir écrire les articles dans le code source (<> ou html) de votre barre d'outils.
4/ Il faut connaître le ratio de vos images (rapport largeur/hauteur) pour construire votre montage autour de ce ratio.
**********************
Pour la rédaction du code lui-même, il faut connaître la largeur de votre zone article pour définir la largeur de votre montage.
Vous créez le cadre du montage en le décorant à votre goût en écrivant, en partie html de votre code.
Afin de lui définir les paramètres en lignes CSS, vous devez lui donner un identifiant (un nom) du genre: id="fondu"
**********************
Comme vous le voyez dans le code exemple, le cadre est vide ( ) et les images sont placées en arrière plan (background) et c'est ce fond que nous allons animer.
Il faut connaître le nombre d'images dans votre montage pour définir le % d'affichage de chacune sachant que le temps que vous allez définir pour le montage sera divisé par le nombre d'images.
100% divisé par 6, par exemple, donnera 16% pour chacune soit: 0%/ 16%/32%/ 48%/ 64%/ 80%/96%...100%
Le temps général sera de 6 x 2s = 12s au moins.
Pour l'animation, j'ai utilisé le code trouvé sur le net; en principe, mon écriture est plutôt, ce qui ne change rien au fonctionnement du montage !
animation:fondu 18s linear infinite normal;