Frage zum Wiki-Artikel „Bildwechsler“
Walter
- css
- frage zum wiki
Hallo Ich möchte das mit mehr als 3 Bilder machen - was muss ich ändern? Vielen Dank und viele Grüsse, Walter
@@Walter
Ich möchte das mit mehr als 3 Bilder machen - was muss ich ändern?
Ähm, einfach mal einen Blick in den Quelltext werfen?
Dann siehst du, dass da bereits mehr als 3 Dinger im Wechsler sind. Es dürfen auch mehr sein. Oder weniger. Oder eigene.
LLAP 🖖
Danke für die Antwort! Ich habe den Quellentext schon genau angeschaut, und auch es auch mit mehreren "#gallery figure:nth-of-type(1)" versucht, erfolglos - es werden einfach nur drei angezeigt. Wenn ich die nth-of-type() erweitere, werden nur andere Bilder angezeigt. Wo genau müsste ich das ändern?
@@Walter
Ich habe den Quellentext schon genau angeschaut, und auch es auch mit mehreren "#gallery figure:nth-of-type(1)" versucht, erfolglos
Oh, du hast dir den CSS-Quelltext angeschaut‽
Hatte SELFHTML nicht früher™ mal eine Einstiegsseite, auf der das Zusammenspiel von HTML, CSS und JavaScript erklärt wurde?
Die Startseite des jetzigen Wikis erschlägt einen gleich mit Begriffen und Linklisten. Ein absoluter Anfänger kann damit nichts anfangen. (No pun intended.)
Wo genau müsste ich das ändern?
Im HTML-Quelltext.
LLAP 🖖
Sorry, aber ich bin Amateur :-( ich habe folgendes Scripts - was ist denn falsch?
<style type="text/css">
main {
background: transparent;
border-color: transparent;
}
#gallery {
position: relative;
background: none;
border: none;
}
#gallery figure {
position: absolute;
top: 0;
left: 60px;
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(8) {
animation-delay: 5s;
}
#gallery figure:nth-of-type(7) {
animation-delay: 5s;
}
#gallery figure:nth-of-type(6) {
animation-delay: 5s;
}
#gallery figure:nth-of-type(5) {
animation-delay: 5s;
}
#gallery figure:nth-of-type(4) {
animation-delay: 5s;
}
#gallery figure:nth-of-type(3) {
animation-delay: 5s;
}
#gallery figure:nth-of-type(2) {
animation-delay: 5s;
}
#gallery figure:nth-of-type(1) {
animation-delay: 10s;
}
</style>
und folgendes HTML/PHP
1. <main>
2. <div id="gallery">
3. <figure> <img src="<?echo $bild1 ;?>" alt="bild1"></figure>
4. <figure> <img src="<?echo $bild2 ;?>" alt="bild2"></figure>
5. <figure> <img src="<?echo $bild3 ;?>" alt="bild3"></figure>
6. <figure> <img src="<?echo $bild4 ;?>" alt="bild4"></figure>
7. <figure> <img src="<?echo $bild5 ;?>" alt="bild5"></figure>
8. <figure> <img src="<?echo $bild6 ;?>" alt="bild6"></figure>
9. <figure> <img src="<?echo $bild7 ;?>" alt="bild7"></figure>
10. <figure> <img src="<?echo $bild8 ;?>" alt="bild8"></figure>
11. </div>
12. </main>
Hallo Walter,
was ist denn falsch?
du hast dir noch nicht klar gemacht, wie der Wechsler funktioniert:
Jedes Bild wird für eine kurze Zeit ein- und sonst ausgeblendet. Damit das nicht alle Bilder synchron machen, bekommt jedes für seine Animation eine eigene Verzögerung. Daher musst du
Gruß
Jürgen
@@JürgenB
Damit das nicht alle Bilder synchron machen, bekommt jedes für seine Animation eine eigene Verzögerung. Daher musst du
- Animationsdauer
- Animationsdelay
- und Framedefinition anpassen.
Und das macht den Bildwechsler ziemlich gebrauchsuntauglich. Bei Änderungen am Bildmaterial sollte man nichts weiter tun müssen als die Bilder im Markup hinzuzufügen/rauszunehmen.
Eine reine CSS-Lösung fällt mir dafür gerade nicht ein. Mit CSS-Präprozessor sollte es aber ein Leichtes sein, dass man nur an einer Stelle im Code eine Veränderung vornehmen muss: der Wert der Variablen für die Anzahl der Bilder.
LLAP 🖖
Hallo Gunnar,
Und das macht den Bildwechsler ziemlich gebrauchsuntauglich.
so extrem sehe ich das nicht, aber man sollte schon die Idee dahinter verstehen.
Eine reine CSS-Lösung fällt mir dafür gerade nicht ein. Mit CSS-Präprozessor sollte es aber ein Leichtes sein, …
was zeigt, das im CSS noch vieles im Argen liegt. Könnte man mit Variablen da etwas erreichen? Funktioniert calc auch in Keyframes etc?
Gruß
Jürgen
@@JürgenB
was zeigt, das im CSS noch vieles im Argen liegt.
Nun ja, CSS ist halt eine deklarative Sprache zur Darstellung, keine Programmiersprache. Und das ist auch gut so.
Könnte man mit Variablen da etwas erreichen? Funktioniert calc auch in Keyframes etc?
Ja, etwas. Man müsste nur die Anzahl der Bilder in eine Variable reinbekommen. Ein Einzeiler in JavaScript.
Um aber die verschiedenen Delays zu setzen, bräuchte man wohl eine Schleife. Mit Sass kein Problem …
Ich hätte da noch eine Idee, muss aber erstmal nachdenken, ob das druckreif ist.
LLAP 🖖
Hallo Walter,
du musst folgendes ändern/erweitern:
#gallery figure
die Animationszeit von 15 auf 20 (oder mehr) Sekunden anpassen,@keyframes wechseln
die Prozentangaben auf 0%, 20%, 30%, 92%, 100% anpassen (für 4 Bilder), hier ist bestimmt noch Feintuning nötig,#gallery figure:nth-of-type(3)
einfügen und die Delays auf 5s, 10s und 15s setzen. Bei mehr als 4 Bildern analog weitere Regeln.Gruß
Jürgen