Mittwoch, 5. Juli 2023
Marquee-Slideshow (mit PhotoSwipe)
Laufschrift ohne Ruckeln, und ohne das deprecated marquee-Tag. Statt dessen mit CSS. Diese Technik eignet sich auch gut für eine Slideshow mit Bildern:
Das HTML
<div id="marquee" class="my-gallery">
<div id = "inner_marquee">
<img src="pfad_zum_Bild.jpg" alt="…" >
<img src="pfad_zum_Bild.jpg" alt="…" >
<img src="pfad_zum_Bild.jpg" alt="…" >
</div>
</div>
Das CSS
<style>
#marquee {
white-space: nowrap;
overflow:hidden;
font-size: 0; /* entfernt margin zwischen bildern*/
}
#inner_marquee {
display: inline-block;
animation: emulate_marquee linear alternate infinite;
animation-delay:2s;
animation-duration:8s;
}
#inner_marquee img {
height:240px;
}
/* Make it move */
@keyframes emulate_marquee {
0% {transform: translate(0,0);}
100% {transform: translate(-530px,0);} /* Wert empirisch ermitteln*/
}
</style>
In dieser Demo setze ich auch zusätzlich PhotoSwipe ein. Nur um zu demonstrieren, wie flexibel das Script ist.
Artikeltexte und Code-Snippets: Creative Commons CC BY-SA 4.0
Medien (Bilder, Videos, Audios) sind evtl. urheberrechtlich geschützt.
Kommentare
Über Ihren Kommentar zu diesem Artikel freue ich mich.
Wenn Sie aber Fragen haben, und eine Antwort erwarten, nutzen Sie bitte das Supportforum! Die Nutzung des Forums ist auch ohne Registrierung möglich.