• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Slider CSS

rantanplan2000

Mitglied
Hey,

ich beschäftige mich grad mit css animationen. Jetzt habe ich eine Slider animation gefunden, bei der ich das System noch nicht ganz verstehe.

https://codepen.io/dudleystorey/pen/ehKpi

Das ganze geht mit 5 Bildern ohne Probleme, klar. Jetzt frage ich mich, wie genau die Werte beim Keyframe zustande kommen? Das Prinzip wie es funktioniert ist klar, die Umsetzung nicht ganz.

Wie würde ich sowas z.B. mit 3 statt 5 Bildern machen? Ich schätze die 20%
Code:
div#slider figure img { width: 20%; .......

müssten dann auf 33.33333% gesetzt werden, also eben 100% : Anzahl der Bilder?

Dann gibt es noch:
Code:
div#slider figure {
  position: relative;
  width: 500%;

Müsste ich den Wert dann auf 300% setzen, da 3X100% Bilder?

leider geht es so noch nicht ganz. er slidet dann als ob 5 mal bilder da wären. liegt das am keyframe, da da ein max-wert von 100% { left: -400%; } steht. (müsste dann -200 sein?) mir ist noch nicht ganz klar, wie ich den anpasse. also auch wie die abstände zustande kommen.

aktuell versuche ich es so, aber da stimmt noch was nicht bzw. wie errechne ich die richtigen abstönde der prozente?

Code:
@keyframes slidy {
 
0% { left: 0%; }
30% { left: 0%; }
 
35% { left: -100%; }
60% { left: -100%; }
 
65% { left: -200%; }
95% { left: -200%; }
}


Vielen Dank :)

p.s. Wenn ich schon dabei bin, kann man animation: infinite bei hover stopen, oder übersteigt dass dann css only?
 
Zuletzt bearbeitet:
Werbung:
ich beschäftige mich grad mit css animationen. Jetzt habe ich eine Slider animation gefunden, bei der ich das System noch nicht ganz verstehe.

https://codepen.io/dudleystorey/pen/ehKpi
Vielleicht ist das für Dich persönlich der falsche Ansatz/Weg, das System einer Animation mit Keyframes vom Grundsatz her zu verstehen.

Online-Dokumentationen (incl. Demos) zu animation und @keyframes gibt's genügend im Netz.

Also erstmal diese studieren, und eigene Versuchsbeispiele entwickeln, wobei man definitiv mehr (für später) lernt, als hinter das Konzept eines unkommentierten Beispiels zu steigen, und am Ende ein Forum danach fragen zu müssen...
aktuell versuche ich es so, aber da stimmt noch was nicht

Code:
@keyframes slidy {

0% { left: 0%; }
30% { left: 0%; }

35% { left: -100%; }
60% { left: -100%; }

65% { left: -200%; }
95% { left: -200%; }
}
Wenn in der Vorlage für 5 Bilder 9 Wegpunkte definiert wurden (für die ersten 4 Bilder gelten 2), kann es nach Adam Riese für 3 Bilder nicht plötzlich 6 Wegpunkte ergeben.
p.s. Wenn ich schon dabei bin, kann man animation: infinite bei hover stopen, oder übersteigt dass dann css only?
Wofür gibt's ansonsten paused?
Und wenn eine pausierende Slideshow mit 5 Bildern das CSS nicht in die Knie zwingen können:
kannst Du Dir bei verminderter Anzahl den Rest selber denken.
 
Danke für deine Antwort.
Ja, habe schon paar Sachen gelesen, nur Keyframes sind neu und bin durch "schauen was so möglich ist" auf den Code gestoßen. oft versteht man den css code beim durchlesen - zumindest bei den kleinen animationen. diesmal hats nicht geklappt. :-)

hast aber recht, werde jetzt mal ausführlich was über keyframes durchlesen.
 
Werbung:
hast aber recht, werde jetzt mal ausführlich was über keyframes durchlesen.
Weil Du momentan mit dem Lesen beschäftigt bist, und ich gerade etwas Luft habe, hier die angepasste* funktionstüchtige Slideshow mit 3 Bildern: https://codepen.io/SpiceLab/pen/MpwxbY

* 5 Keyframes (für 3 Bilder) in 25%-Schritten definiert, um die einzelnen Schritte untereinander gleichmäßig zu verteilen, Animationsdauer von 30s auf 18s herabgesenkt (pro Bild weiterhin 6s).

Wenn Du das Grundprinzip und Zusammenspiel von animation und @keyframes mal verinnerlicht hast, knackst Du jedes im Netz gefundene unkommentierte Konzept binnen weniger Minuten :D:cool:
 
Musste gerade feststellen, dass zu diesem CodePen ein offizielles Tutorial existiert, das alles bis ins Detail erläutert:
Als registrierter User kann ich, nachdem ich ein existierendes CodePen dupliziert habe (Fork), in den "Settings" weitere hinterlegte Infos einsehen - darunter auch diese:
Oder bist Du über andere Kanäle/Wege direkt bei dem Demo gelandet, so wie ich vorhin, dank Deiner freundlichen Mithilfe?
 
Werbung:
Zurück
Oben