Bildwechsel mit css

nebbiolo

Hallo
Ich habe im Netz eine schöne Variante für einen Bildwechsel ohne Java gefunden. Nur habe ich das Problem. dass es nur mit 3 Bilder funktioniert - ich möchte aber deren 8. Ich habe #gallery figure:nth-of-type werweitert - ohne gewünschtes Resultat. Kann mir jemand sagen was ich ändern muss?

Vielen Dank und sonnige Grüsse, nebbiolo

Code

<style type="text/css">
main {
        background: transparent;
        border-color: transparent;
}




#gallery {
        position: relative;
        background: none;
        border: none;
}




#gallery figure {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
        -webkit-animation: wechseln 15s infinite;
        animation: wechseln 15s infinite;
}




@keyframes wechseln {
        0% {opacity: 1;}
        25% {opacity: 1;}
        40% {opacity: 0;}
        92% {opacity: 0;}
        100% {opacity: 1;}
}




@-webkit-keyframes wechseln {
        0% {opacity: 1;}
        25% {opacity: 1;}
        40% {opacity: 0;}
        92% {opacity: 0;}
        100% {opacity: 1;}
}




#gallery figure:nth-of-type(2) {
        animation-delay: 5s;
}




#gallery figure:nth-of-type(1) {
        animation-delay: 10s;
}
</style>

Alles anzeigen

PHP

<main>
    <div id="gallery">         
       <figure> <img src="<?echo $bild1 ;?>" alt="bild1"></figure>         
       <figure> <img src="<?echo $bild2 ;?>" alt="bild2"></figure>         
       <figure> <img src="<?echo $bild3 ;?>" alt="bild3"></figure>         
       <figure> <img src="<?echo $bild4 ;?>" alt="bild4"></figure>         
       <figure> <img src="<?echo $bild5 ;?>" alt="bild5"></figure>         
       <figure> <img src="<?echo $bild6 ;?>" alt="bild6"></figure>         
       <figure> <img src="<?echo $bild7 ;?>" alt="bild7"></figure>         
       <figure> <img src="<?echo $bild8 ;?>" alt="bild8"></figure>       
   </div>       
</main>

Alles anzeigen

Sailor

Hallo,
ich glaube nicht, dass das wirklich das erzeugt, was du haben möchtest.
Du erzeugst mit @keyframes eine Animation, die sich unendlich wiederholt.
dann weist du den #gallery figure:nth-of-type(x) (das müsstest du im Übrigen für alle 8 deiner Bilder machen) ein Delay zu, getaktet in 5s Schritten... aber irgendwann ist dann der Delay für das letzte Bild abgelaufen und deine Animation würde weiter laufen und immer nur das letzte Bild anzeigen.
Außerdem müssen alle deine Bilder die selbe Größe haben, denn mit dieser Variante werden eigentlich immer alle Bilder, bei denen die Delayzeit abgelaufen ist eingeblendet und wenn da unterschiedlich große Bilder sind, dann schaut das größere Bild unter dem Kleineren raus!

Ist zwar nicht ganz das was du suchst... keine Animation.. aber schau mal hier
https://www.forum-hilfe.de/threads/54061-…alerie-mit-CSS3
ob das nichts für dich wäre?

nebbiolo

Danke Sailor für Deine Ausführungen!
Mit drei Bilder, wie "Code" oben funktioniert es genau nach meinen Vorstellungen. Ich möchte auf eine Webseite einfach 8 Fotos abwechseln anzeigen, dann immer wiederholen - auch keinen Button betätigen wie beim angegeben Link. Die Bilder sind alle genau gleich gross.
Ich habe zusätzlich noch 5 (3-7) #gallery figure:nth-of-type(3-7) eingefügt und auch dem delay geändert ... es hat mir aber einfach drei andere Bilder angezeigt.

Code

#gallery figure:nth-of-type(3) {
        animation-delay: 5s;


#gallery figure:nth-of-type(4) {
        animation-delay: 5s; etc. [COLOR=#333333]}
etc.
[/COLOR]

Sailor

Poste doch mal den Link zu der Seite, wo dein Animationsscript herkommt! Vielleicht machen die dort ja noch was geheimnisvolles, um die Delayzeit am Ende wieder auf 0 zu setzen.

Aber hier ist der Code, wie er bei mir mit den oben beschriebenen Einschränkungen läuft!

PHP

<!DOCTYPE HTML>
<html lang="de">
<head>
<title>Gallerie Test</title>
<style type="text/css">
main {
        background: transparent;
        border-color: transparent;
}


#gallery {
        position: relative;
        background: none;
        border: none;
}


@keyframes wechseln {
        0% {opacity: 0.0;}
        5% {opacity: 1.0;}
        95% {opacity: 1.0;}
        100% {opacity: 0.0;}


}


@-webkit-keyframes wechseln {
        0% {opacity: 0.0;}
        5% {opacity: 1.0;}
        95% {opacity: 1.0;}
        100% {opacity: 0.0;}
}


#gallery figure {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
        opacity: 0.0;
        -webkit-animation: wechseln 5s infinite;
        animation: wechseln 5s infinite;
}


#gallery figure:nth-of-type(1) {
        animation-delay: 0s;
}


#gallery figure:nth-of-type(2) {
        animation-delay: 5s;
}


#gallery figure:nth-of-type(3) {
        animation-delay: 10s;
}


#gallery figure:nth-of-type(4) {
        animation-delay: 15s;
}


#gallery figure:nth-of-type(5) {
        animation-delay: 20s;
}


#gallery figure:nth-of-type(6) {
        animation-delay: 25s;
}


#gallery figure:nth-of-type(7) {
        animation-delay: 30s;
}


#gallery figure:nth-of-type(8) {
        animation-delay: 35s;
}


</style>


</head>
<body>
<main>
    <div id="gallery">
       <figure> <img src="<?php echo $bild1;?>" alt="bild1"></figure>
       <figure> <img src="<?php echo $bild2;?>" alt="bild2"></figure>
       <figure> <img src="<?php echo $bild3;?>" alt="bild3"></figure>
       <figure> <img src="<?php echo $bild4;?>" alt="bild4"></figure>
       <figure> <img src="<?php echo $bild5;?>" alt="bild5"></figure>
       <figure> <img src="<?php echo $bild6;?>" alt="bild6"></figure>
       <figure> <img src="<?php echo $bild7;?>" alt="bild7"></figure>
       <figure> <img src="<?php echo $bild8;?>" alt="bild8"></figure>
   </div>
</main>
</body>
</html>

Alles anzeigen

nebbiolo

Vielen Dank, so funktioniert es fast
Nur bleibt das letzte Bild stehen und die Übergänge sind abrupt.

Hier habe ich die Beschreibung gefunden: https://wiki.selfhtml.org/wiki/CSS/Anwen…is/Bildwechsler

Ich habe alles ein bisschen abgeändert, aber komme einfach zu keinem brauchbaren Resultat.

Was mir nicht klar ist: @keyframe wechseln gilt das für jedes einzelne Bild?

Sailor

Das Problem lag wie immer zwischen den Ohren... zwischen meinen Ohren .
Das @keyframe wirkt auf alles, was #gallery figure heißt, nur eben zeitlich versetzt durch den die delay Anweisung zu den nth-of-type(x) Elementen.
Der Trick ist jetzt das Timeing... weil gemäß dem @keyframe ist das Element bei 0% der Gesamtdauer der Animation (40 Sekunden) unsichtbar.
Bei 8% der Zeit sichtbar und bleibt sichtbar bis 13%.
Verblasst dann bis 18% und bleibt unsichtbar bis zum Ende, 100% der Animation.
Und weil das jeweils mit 5 Sekunden Abstand durch deine Liste geschieht, wird dieser Effekt erzielt... und wenn das Timeing stimmt, dann wiederholt sich das auch unendlich.
Probier es aus!

HTML

<style type="text/css">
main {
        background: transparent;
        border-color: transparent;
}


#gallery {
        position: relative;
        background: none;
        border: none;
}


#gallery figure {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
        opacity: 0.0;
        -webkit-animation: wechseln 40s infinite;
        animation: wechseln 40s infinite;
}


@keyframes wechseln {
        0% {opacity: 0;}
        8% {opacity: 1;}
        13% {opacity: 1;}
        18% {opacity: 0;}
        100% {opacity: 0;}
}


@-webkit-keyframes wechseln {
        0% {opacity: 0;}
        8% {opacity: 1;}
        13% {opacity: 1;}
        18% {opacity: 0;}
        100% {opacity: 0;}
}


#gallery figure:nth-of-type(1) {
        animation-delay: 0s;
}


#gallery figure:nth-of-type(2) {
        animation-delay: 5s;
}


#gallery figure:nth-of-type(3) {
        animation-delay: 10s;
}


#gallery figure:nth-of-type(4) {
        animation-delay: 15s;
        }


#gallery figure:nth-of-type(5) {
        animation-delay: 20s;
}


#gallery figure:nth-of-type(6) {
        animation-delay: 25s;
        }


#gallery figure:nth-of-type(7) {
        animation-delay: 30s;
}


#gallery figure:nth-of-type(8) {
        animation-delay: 35s;
}


</style>

Alles anzeigen

nebbiolo

SUPER, danke vielmals - nun funktioniert es genau so wie ich es mich vorgestellt habe.
Viele Grüsse an die Nordseeküste aus "Bella Italia", Nebbiolo

Sailor

Molto bene... lass mich wissen, wenn das fertige Produkt zu bewundern ist!

Arne Drews

Hallo,

Ich halte die Lösung nicht für sehr sinnvoll.
Bei jedem weiteren Bild ( oder auch, wenn ein Bild rausfällt ), musst Du die CSS anpassen, aufgrund der Delays.
Eine Gallery sollte selbständig auf eine Änderung der Bilder reagieren können. Sofern Du Deine hier gezeigte CSS dynamisch auf Basis der Bilder generierst, wäre das natürlich möglich, dennoch finde ich die Lösung nicht sehr schön, aber das ist nur meine persönliche Meinung!

Sorry, wenn's Dir wie Klug scheißen vorkommt, aber ich kann das so nicht stehen lassen:

Zitat

Ich habe im Netz eine schöne Variante für einen Bildwechsel ohne Java gefunden.

Java ist nicht JavaScript und hat außer der Namensgebung so gut wie nichts miteinander zu tun!

Sailor

Hättest du eine bessere Lösung parat, wenn die Frage lautet - Bildwechsel... 8 Bilder... ohne Java(Script)?
Ein paar Zeilen PHP, um das dynamische Einfügen des notwendigen Codes (CSS + HTML Code zum Einfügen der Bilder) bei einer beliebigen Anzahl von Bildern zu bewerkstelligen, sind sicherlich in überschaubarer Zeit zu generieren.

Arne Drews

Zitat von Sailor

Hättest du eine bessere Lösung parat, wenn die Frage lautet - Bildwechsel... 8 Bilder... ohne Java(Script)?
Ein paar Zeilen PHP, um das dynamische Einfügen des notwendigen Codes (CSS + HTML Code zum Einfügen der Bilder) bei einer beliebigen Anzahl von Bildern zu bewerkstelligen, sind sicherlich in überschaubarer Zeit zu generieren.

Womit Du Dir die Frage quasi selbst beantwortest hast.
Ja, das wäre eine Möglichkeit.

Ich habe bewusst kein Beispiel in diesem Fall aufgezeigt, weil ich das auf die Weise nicht lösen würde.
Mir gefällt halt das ganze Prinzip nicht wirklich, weil es eben nicht sehr wartungsfreundlich ist.
Aber ich sagte auch, dass das nur meine Meinung ist und zum Überdenken anregen sollte, nicht dass man es anders machen muss!

Tags