• Diapo 10b

    En cherchant des idées de diaporamas sur le net, je m'aperçois que j'ai bien compliqué mes codes et qu'il y a des façons beaucoup plus simples pour obtenir le même résultat !

    Hôtel Bakoua, Trois Ilets, Martinique: Voici une idée de code avec 5 images, au ratio 4/3, en 1000x750px, à partir de mes images en 1000x563px, ratio 16/9, modifiées en ratio et taille par @1000x750.

     Je crois que le code est assez simple pour pouvoir être adapté au nombre de vos images. J'ai ajouté un arrêt au survol !

     


    <div id="fondu">&nbsp;</div>
    <style><!--
    #fondu{position:relative; width:1000px; height:750px; 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@1000x750.jpg');}
    20%{background-image:url('http://ekladata.com/Ds0gwI5glVSdMD9XD0tTKefzY_o@1000x750.jpg');}
    40%{background-image:url('http://ekladata.com/IryqRhbvxuFWs7W3uRUMW06T8rg@1000x750.jpg');}
    60%{background-image:url('http://ekladata.com/kibulpTYU-PIMLaTRsGzebk28BU@1000x750.jpg');}
    80%{background-image:url('http://ekladata.com/PgqRfFBmZF8sKSaDwteu0L6IsFs@1000x750.jpg');}
    100%{background-image:url('http://ekladata.com/PgqRfFBmZF8sKSaDwteu0L6IsFs@1000x750.jpg');}}
    --></style>


    Le même pour images en 800x450, ratio 16/9...

    <div id="fondu">&nbsp;</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>