bouclage sans faille d'images dans la bannière de défilement de diapositives en utilisant css seulement

J'ai reçu du code pour un défilement de diapositives css que grâce à Naren Murali j'ai pu modifier pour mes 14 images, basé sur la démo qui n'en utilisait que 6. Cependant, le seul problème est que je ne sais pas comment modifier les animations des images clés de sorte que la première et la dernière image soient les mêmes, ce qui se traduit par une transition transparente de la fin du spectacle à la prochaine itération.bouclage sans faille d'images dans la bannière de défilement de diapositives en utilisant css seulement

Si quelqu'un peut m'expliquer comment accomplir cela, je serais très reconnaissant.

Merci.

html { 
 
     background-color: white; 
 
     } 
 
    body { 
 
     width: 1300px; 
 
    \t margin: 0 auto 0; 
 
     } 
 
    #container { 
 
    \t width: 500px; 
 
    \t overflow: hidden; 
 
    \t margin: 50px auto; 
 
    \t background: white; 
 
    } 
 
    .photobanner { 
 
     height: 270px; 
 
     width: 6748px; 
 
     margin-bottom: 80px; 
 
     font-size:0px; 
 
    } 
 
    img{ 
 
     margin-right:2px; 
 
    } 
 
    .flex-container { 
 
     display: -webkit-flex; 
 
     display: -ms-flexbox; 
 
     display: flex; 
 
     margin-top: 30px; 
 
     } 
 
    .first { 
 
    \t -webkit-animation: bannermove 60s linear infinite; 
 
    \t -moz-animation: bannermove 60s linear infinite; 
 
    \t  -ms-animation: bannermove 60s linear infinite; 
 
    \t  -o-animation: bannermove 60s linear infinite; 
 
    \t   animation: bannermove 60s linear infinite; 
 
    } 
 
    @keyframes "bannermove" { 
 
    0% { 
 
     margin-left: 0px; 
 
    } 
 
    100% { 
 
     margin-left: -6268px; 
 
    } 
 
    } 
 
    @-moz-keyframes bannermove { 
 
    0% { 
 
     margin-left: 0px; 
 
    } 
 
    100% { 
 
     margin-left: -6268px; 
 
    } 
 
    } 
 
    @-webkit-keyframes "bannermove" { 
 
    0% { 
 
     margin-left: 0px; 
 
    } 
 
    100% { 
 
     margin-left: -6268px; 
 
    } 
 
    } 
 
    @-ms-keyframes "bannermove" { 
 
    0% { 
 
     margin-left: 0px; 
 
    } 
 
    100% { 
 
     margin-left: -6268px; 
 
    } 
 
    } 
 
    @-o-keyframes "bannermove" { 
 
    0% { 
 
     margin-left: 0px; 
 
    } 
 
    100% { 
 
     margin-left: -6268px; 
 
    } 
 
    } 
 
    img{ 
 
     margin-right:2px; 
 
    }

<header> 
 
    </header> 
 
    <section class="flex-container"> 
 
     <div id="container"> 
 
     <!-- Each image is 480px by 270px --> 
 
     <div class="photobanner"> 
 
     \t <img class="first" src="https://www.bartonlewis.com/_imagesfilm/scroll_blue.jpg" alt="blue" /> 
 
      <img src="https://www.bartonlewis.com/_imagesfilm/scroll_23rd_st.jpg" alt="23rd st" /> 
 
      <img src="https://www.bartonlewis.com/_imagesfilm/scroll_broken_guru.jpg" alt="broken guru" /> 
 
      <img src="https://www.bartonlewis.com/_imagesfilm/scroll_church_ave.jpg" alt="church ave" /> 
 
      <img src="https://www.bartonlewis.com/_imagesfilm/scroll_nose.jpg" alt="nose" /> 
 
      <img src="https://www.bartonlewis.com/_imagesfilm/scroll_pants.jpg" alt="pants" /> 
 
      <img src="https://www.bartonlewis.com/_imagesfilm/scroll_i_will_miss_you.jpg" alt="i will miss you" /> 
 
      <img src="https://www.bartonlewis.com/_imagesfilm/scroll_network_reality_stars.jpg" alt="network reality all stars" /> 
 
      <img src="https://www.bartonlewis.com/_imagesfilm/scroll_kline.jpg" alt="kline" /> 
 
      <img src="https://www.bartonlewis.com/_imagesfilm/scroll_queen.jpg" alt="queen" /> 
 
      <img src="https://www.bartonlewis.com/_imagesfilm/scroll_water.jpg" alt="water" /> 
 
      <img src="https://www.bartonlewis.com/_imagesfilm/scroll_swirls.jpg" alt="swirls" /> 
 
      <img src="https://www.bartonlewis.com/_imagesfilm/scroll_robins_egg.jpg" alt="robins egg" /> 
 
      <img src="https://www.bartonlewis.com/_imagesfilm/scroll_ports.jpg" alt="ports" /> 
 
    </div> 
 
     </div> 
 
    </section>

Source

2017-10-02 Barton Lewis

Astuce: les préfixes de vendeur pour '@ keyframes' ne sont plus nécessaires. – Dai

Autre astuce: Si vous utilisez 'display: flex' (sans wrapping) dans le conteneur' photobanner', vous n'avez pas besoin de définir une largeur absolue, donc vous pouvez ajouter de nouveaux éléments sans avoir besoin d'éditer le CSS. – Dai

Merci pour les conseils. Si vous avez un aperçu de la façon dont je fais passer l'image finale dans le premier lorsque le cycle se termine, j'apprécierais. Dans la démo, l'auteur a 6 images et fait ensuite le 1er 4 répéter. Il dit que cela facilite "répéter suffisamment d'images pour remplir le cadre". Cela permet à la "première image de correspondre parfaitement à la dernière image". Je ne comprends pas les paramètres et ne peux donc pas dupliquer le processus. Vraisemblablement, écrire le code html de cette façon est en quelque sorte lié à la durée du spectacle, et peut-être à la valeur margin-left dans les images-clés? Merci pour tout commentaire. –

Je suis retourné à la démo et figured it out. J'ai répété les 1ères 4 images après le cycle complet de 14. J'ai fait le .container 1000px de large et le .photobanner 8640px large (480px (largeur de l'image) x 18). Ensuite, je place la marge à une valeur négative pour déplacer la ligne d'images suffisamment loin pour que la deuxième itération de la première image prenne la première place. Comme dans la démo ce nombre était -2125 et chaque image avait une largeur de 350px, et 2125/350 = 6 qui était le nombre d'images discrètes, j'ai multiplié mes 14 images discrètes par 480 = 6720. Ce réglage presque aligné mais nécessaire. Avec une marge de gauche de -6745, il s'est déroulé assez bien.

<!DOCTYPE HTML> 
<html> 
<head> 
<style> 
.flex-container { 
    display: -webkit-flex; 
    display: -ms-flexbox; 
    display: flex; 
    justify-content: center; 
    } 
.flex-container_1 { 
    display: -webkit-flex; 
    display: -ms-flexbox; 
    display: flex; 
    width: 1200px; 
    justify-content: center; 
    margin: 0 auto 0; 
    } 
.container { 
    width: 1000px; 
    overflow: hidden; 
    margin: 50px auto; 
    background: white; 
    } 
.photobanner { 
    display: flex; 
    flex-wrap: nowrap; 
    height: 270px; 
    width: 8640px; 
    margin-bottom: 20px; 
    font-size:0px; 
} 
img{ 
    margin-right:2px; 
} 
.first { 
    -webkit-animation: bannermove 60s linear infinite; 
     -moz-animation: bannermove 60s linear infinite; 
     -ms-animation: bannermove 60s linear infinite; 
     -o-animation: bannermove 60s linear infinite; 
      animation: bannermove 60s linear infinite; 
} 
@keyframes "bannermove" { 
0% { 
    margin-left: 0px; 
} 
100% { 
    margin-left: -6745px; 
} 
} 
@-moz-keyframes bannermove { 
0% { 
    margin-left: 0px; 
} 
100% { 
    margin-left: -6745px; 
} 
} 
@-webkit-keyframes "bannermove" { 
0% { 
    margin-left: 0px; 
} 
100% { 
    margin-left: -6745px; 
} 
} 
@-ms-keyframes "bannermove" { 
0% { 
    margin-left: 0px; 
} 
100% { 
    margin-left: -6745px; 
} 
} 
@-o-keyframes "bannermove" { 
0% { 
    margin-left: 0px; 
} 
100% { 
    margin-left: -6745px; 
} 
} 
img{ 
    margin-right:2px; 
} 
</style> 
</head> 
<section class="flex-container_1"> 
    <div class="container"> 
    <!-- Each image is 480px by 270px --> 
    <div class="photobanner"> 
      <img class="first" src="https://www.bartonlewis.com/_imagesfilm/scroll_blue.jpg" alt="blue" /> 
      <img src="https://www.bartonlewis.com/_imagesfilm/scroll_23rd_st.jpg" alt="23rd st" /> 
      <img src="https://www.bartonlewis.com/_imagesfilm/scroll_broken_guru.jpg" alt="broken guru" /> 
      <img src="https://www.bartonlewis.com/_imagesfilm/scroll_church_ave.jpg" alt="church ave" /> 
      <img src="https://www.bartonlewis.com/_imagesfilm/scroll_nose.jpg" alt="nose" /> 
      <img src="https://www.bartonlewis.com/_imagesfilm/scroll_pants.jpg" alt="pants" /> 
      <img src="https://www.bartonlewis.com/_imagesfilm/scroll_i_will_miss_you.jpg" alt="i will miss you" /> 
      <img src="https://www.bartonlewis.com/_imagesfilm/scroll_network_reality_stars.jpg" alt="network reality all stars" /> 
      <img src="https://www.bartonlewis.com/_imagesfilm/scroll_kline.jpg" alt="kline" /> 
      <img src="https://www.bartonlewis.com/_imagesfilm/scroll_queen.jpg" alt="queen" /> 
      <img src="https://www.bartonlewis.com/_imagesfilm/scroll_water.jpg" alt="water" /> 
      <img src="https://www.bartonlewis.com/_imagesfilm/scroll_swirls.jpg" alt="swirls" /> 
      <img src="https://www.bartonlewis.com/_imagesfilm/scroll_robins_egg.jpg" alt="robins egg" /> 
      <img src="https://www.bartonlewis.com/_imagesfilm/scroll_ports.jpg" alt="ports" /> 
<img class="first" src="https://www.bartonlewis.com/_imagesfilm/scroll_blue.jpg" alt="blue" /> 
      <img src="https://www.bartonlewis.com/_imagesfilm/scroll_23rd_st.jpg" alt="23rd st" /> 
      <img src="https://www.bartonlewis.com/_imagesfilm/scroll_broken_guru.jpg" alt="broken guru" /> 
      <img src="https://www.bartonlewis.com/_imagesfilm/scroll_church_ave.jpg" alt="church ave" /> 
    </div> 
     <p>film stills from "wall cuts, train stations, New York City" &#40;2016&#41;</p> 
    </div> 
     </section> 
</html>

Source

2017-10-07 23:11:23

bouclage sans faille d'images dans la bannière de défilement de diapositives en utilisant css seulement

Répondre

Questions connexes