nicht angemeldet
CSS :after stehen lassen bis Elternelement Viewport verlässt
0 
Gunnar Bittersmann
0 0 Gunnar Bittersmann
0 
Matthias Apsel
0 0 
Auge
0 0
CSS :after stehen lassen bis Elternelement Viewport verlässt
Moin,
Klingt schon abenteuerlich mein Titel. Ist es wahrscheinlich auch. 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)
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. Ist sowas überhaupt ohne JS möglich?
Gruß Bobby
--
-> Für jedes Problem gibt es eine Lösung, die einfach, sauber und falsch ist! <- ### Henry L. Mencken ### -> Nicht das Problem macht die Schwierigkeiten, sondern unsere Sichtweise! <- ### Viktor Frankl ### ie:{ br:> fl:{ va:} ls:< fo:) rl:( n4:( de:> ss:) ch:? js:( mo:} sh:) zu:)
-> Für jedes Problem gibt es eine Lösung, die einfach, sauber und falsch ist! <- ### Henry L. Mencken ### -> Nicht das Problem macht die Schwierigkeiten, sondern unsere Sichtweise! <- ### Viktor Frankl ### ie:{ br:> fl:{ va:} ls:< fo:) rl:( n4:( de:> ss:) ch:? js:( mo:} sh:) zu:)
-
@@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.-
Moin,
Danke für die Hinweise. Ich habs nun letztendlich doch durch Javascript gelöst, da ja tatsächlich eh schon Javascript genutzt wird
ich hab nun ein Bild per Append angehangen, welches fixed positioniert ist. Ist das Item nicht aktiv, ist dieses Bild ausgeblendet. Ansonsten ist es eingeblendet. Dass dies Bild mit nach oben und unten scrollt habe ich über den Eventhandler scroll() und die scrollTop()-Eigenschaft abgefangen, die negativ als margin-top übernommen wird.
So passt es wunderbar und ist auch sehr schnell (hab nen schön langsamen Server)
Gruß Bobby
--
-> Für jedes Problem gibt es eine Lösung, die einfach, sauber und falsch ist! <- ### Henry L. Mencken ### -> Nicht das Problem macht die Schwierigkeiten, sondern unsere Sichtweise! <- ### Viktor Frankl ### ie:{ br:> fl:{ va:} ls:< fo:) rl:( n4:( de:> ss:) ch:? js:( mo:} sh:) zu:)-
@@bobby
Ich habs nun letztendlich doch durch Javascript gelöst, da ja tatsächlich eh schon Javascript genutzt wird
So passt es wunderbar und ist auch sehr schnell (hab nen schön langsamen Server)
?? Was hat der Server damit zu tun, wie flüssig eine Animation auf einem Client läuft? Und ich würde denken, dass CSS-Animationen, die (wenn man’s richtig macht) über GPU laufen, flüssiger sind als JS-Gefrickel.
LLAP 🖖
--
Ist diese Antwort anstößig? Dann könnte sie nützlich sein.-
Hallo Gunnar Bittersmann,
Irgendwie hatte ich gehofft, dass sich hinter diesem Link eine CSS-Lösung verbirgt.
Bis demnächst
Matthias--
Signaturen sind bloed (Steel) und Markdown ist mächtig.-
Irgendwie hatte ich gehofft, dass sich hinter diesem Link eine CSS-Lösung verbirgt.
Wennn man hier fleissig genug mitliest, kennt man das Linkziel bereits vorab. Die Kombination aus dem Autor Gunnar und dem verlinkten Wort "Katze" reicht völlig aus.
-
Hallo Mitleser,
Wennn man hier fleissig genug mitliest, kennt man das Linkziel bereits vorab. Die Kombination aus dem Autor Gunnar und dem verlinkten Wort "Katze" reicht völlig aus.
Aber Gunnar ist auch einer, der Lösungswege aufzeigt.
Bis demnächst
Matthias--
Signaturen sind bloed (Steel) und Markdown ist mächtig.-
Aber Gunnar ist auch einer, der Lösungswege aufzeigt.
Unbestritten. Darauf verlinkt er ja auch oft.
-
-
-
Hallo
Irgendwie hatte ich gehofft, dass sich hinter diesem Link eine CSS-Lösung verbirgt.
Ein russisches Sprichwort sagt „Die Hoffnung stirbt zuletzt.“. Berthold Brecht soll es um den Nachsatz „Aber sie stirbt.“ ergänzt haben.
Tschö, Auge
--
Es schimmerte ein Licht am Ende des Tunnels und es stammte von einem Flammenwerfer.
Terry Pratchett, „Gevatter Tod“
-
-
Moin,
Es ging eben NICHT mit css zu lösen, aufgrund der Anforderung dass das Icon einem item zugeordnet sein muss, nicht horizontal aber vertikal mitscrollen muss. Dies ist einfach nicht umsetzbar mittels CSS.
Gruß Bobby
--
-> Für jedes Problem gibt es eine Lösung, die einfach, sauber und falsch ist! <- ### Henry L. Mencken ### -> Nicht das Problem macht die Schwierigkeiten, sondern unsere Sichtweise! <- ### Viktor Frankl ### ie:{ br:> fl:{ va:} ls:< fo:) rl:( n4:( de:> ss:) ch:? js:( mo:} sh:) zu:)-
Hallo bobby,
Es ging eben NICHT mit css zu lösen, aufgrund der Anforderung dass das Icon einem item zugeordnet sein muss, nicht horizontal aber vertikal mitscrollen muss. Dies ist einfach nicht umsetzbar mittels CSS.
nur in eine Richtung fixiert? Das sollte gehen. Siehe etwa http://brückentage.info/2015/brueckentage-deutschland-2015.html, dort die Werbung für meine-geburtstage.de.
Bis demnächst
Matthias--
Signaturen sind bloed (Steel) und Markdown ist mächtig.-
Moin,
nur in eine Richtung fixiert? Das sollte gehen. Siehe etwa http://brückentage.info/2015/brueckentage-deutschland-2015.html, dort die Werbung für meine-geburtstage.de.
Das gänge wenn es nicht einem Item aus dem Carousel zugeordnet wäre. Glaube mir. Ich habe jetzt 3 Tage die verschiedensten Möglichkeiten ausprobiert.
Gruß Bobby
--
-> Für jedes Problem gibt es eine Lösung, die einfach, sauber und falsch ist! <- ### Henry L. Mencken ### -> Nicht das Problem macht die Schwierigkeiten, sondern unsere Sichtweise! <- ### Viktor Frankl ### ie:{ br:> fl:{ va:} ls:< fo:) rl:( n4:( de:> ss:) ch:? js:( mo:} sh:) zu:)
-
-
-
Moin,
?? Was hat der Server damit zu tun, wie flüssig eine Animation auf einem Client läuft?
Es muss mehr geladen und nachgeladen werden. Das habe ich getestet. Im Ausliefern von Daten macht so ein langsamer Server echt einen gewaltigen unterschied.
Gruß Bobby
--
-> Für jedes Problem gibt es eine Lösung, die einfach, sauber und falsch ist! <- ### Henry L. Mencken ### -> Nicht das Problem macht die Schwierigkeiten, sondern unsere Sichtweise! <- ### Viktor Frankl ### ie:{ br:> fl:{ va:} ls:< fo:) rl:( n4:( de:> ss:) ch:? js:( mo:} sh:) zu:)-
@@bobby
?? Was hat der Server damit zu tun, wie flüssig eine Animation auf einem Client läuft?
Es muss mehr geladen und nachgeladen werden. Das habe ich getestet. Im Ausliefern von Daten macht so ein langsamer Server echt einen gewaltigen unterschied.
Das ist keine Antwort auf meine Frage. Ich fragte nicht nach dem Seitenaufbau, sondern nach der Animation, die läuft, wenn alle Daten schon zum Client übertragen sind.
(Und wer bei einem Karussell die Daten erst bei der Nutzeraktion nachlädt, macht schon was falsch.)
LLAP 🖖
--
Ist diese Antwort anstößig? Dann könnte sie nützlich sein.
-
-
-
-