Gunnar Bittersmann: CSS :after stehen lassen bis Elternelement Viewport verlässt

Beitrag lesen

@@bobby

Ich habe ein "Carousel" gebastelt. In diesem ist eine UL mit mehreren LI, die einzeln bei Betätigen des Next/Prev Button den Viewport betreten oder verlassen (sliden)

Das machst du mit CSS-Transition, nicht wahr? Du kennst die Zeit t, in der die Transtion ab Drücken des Buttons läuft.

Auf den jeweiligen Bildern ligt per :after ein Bild. Dieses soll nun per css, wenn möglich, auf dem Viewport stehen bleiben, solange das entsprechende LI noch zu sehen ist. Mit fixed würden ja alle gleichzeitig eingeblendet werden.

Du kannst den Dingern ja einen z-Index verpassen, so dass sie bis auf jeweils eines nicht sichtbar sind. z-Index kann auch animiert werden; die Transition startest du nach Ablauf des Slide-Vorgangs, also mit einer Verzögerung von t.

Ist sowas überhaupt ohne JS möglich?

Beim Drücken eines Buttons läuft dann aber schon ein Eventhandler, also JavaScript?

LLAP 🖖

--
Ist diese Antwort anstößig? Dann könnte sie nützlich sein.