nicht angemeldet Killua
Gunnar Bittersmann
Rolf B
Killua
Killua
Killua
Killua
Ich versuche mich erstmals an CSS Animationen.
Jedoch gibts schon am Anfang, bei der bloßen Transition Fragen.
So wollte ich eine Grafik einblenden bewegen und skalieren, alles mit einem Hover. Leider kann man scheinbar nicht alle möglichen transform Anweisungen kombinieren?
HTML:
<img class="headerlogo" id="logoimheader" src="bubbles2.png">
CSS:
Matthias Scharwies
Der Martin
Auge
Tabellenkalk
MudGuard.headerlogo { width: 10vw; height: auto; opacity: 0; transition: all 3s; }
.headerlogo:hover { opacity: 1; }
.headerlogo:hover { transform: translateY(-1000px); }
.headerlogo:hover { transform: scale(5); }
.headerlogo#logoimheader{ transition: all 3s;}
Nun wird die Grafik beim Hover sichtbar und skaliert. Aber es findet keine Bewegung Richtung Y statt.
Kommentiere ich z.B. scale() aus, wird eingeblendet und es fährt hoch.
(Da habe ich aber das (noch nebensächliche) Problem, dass, sobald es aus dem Mausbereich flutscht, auch mit der Bewegung aufhört.)
Drehe ich die Reihenfolge um, sodass translateY() nach scale() steht, dann wird nicht skaliert ...
Die Frage ist: Gibt es im Bereich der CSS Animationen irgendwelche Regeln, Grenzen, was man wie kombinieren darf?
Bitte keine Hinweise bez. Sinn und Unsinn von Animationen und wie sehr das irgendwelche Besucher stören und nerven könnte. Das ist mir wurst, wer weiß ob ich so etwas je wo einsetze. Dzt. ist es nur Spielerei am XAMPP.
@@Killua
Ich versuche mich erstmals an CSS Animationen.
Jedoch gibts schon am Anfang, bei der bloßen Transition Fragen.
Dein Problem hat nichts mit Animation/Transition zu tun.
So wollte ich eine Grafik einblenden bewegen und skalieren, alles mit einem Hover. Leider kann man scheinbar nicht alle möglichen transform Anweisungen kombinieren?
Doch, kann man. Man muss es nur richtig™ machen.
.headerlogo:hover { transform: translateY(-1000px); } .headerlogo:hover { transform: scale(5); }
Du gibst hier für den Selektor .headerlogo:hover die Deklaration transform: translateY(-1000px) an. Unmittelbar danach überschreibst du diese mit transform: scale(5); der vorige Wert ist damit futsch.
Nun wird die Grafik beim Hover sichtbar und skaliert. Aber es findet keine Bewegung Richtung Y statt.
Das sollte jetzt nicht mehr verwundern …
Drehe ich die Reihenfolge um, sodass
translateY()nachscale()steht, dann wird nicht skaliert ...
… und das auch nicht mehr.
Die Frage ist: Gibt es im Bereich der CSS Animationen irgendwelche Regeln, Grenzen, was man wie kombinieren darf?
Ja. Jedes Element hat jede CSS-Eigenschaft genau einmal.
Wenn du Verschiebung und Skalierung kombinieren willst, müsstest du das in einer transform-Deklaration tun:
.headerlogo:hover { transform: translateY(-1000px) scale(5); }
bzw. (je nachdem, was du willst)
.headerlogo:hover { transform: scale(5) translateY(-1000px); }
Oder du verwendest die CSS-Eigenschaften translate und scale:
.headerlogo:hover { translate: 0 -1000px; scale: 5; }
🖖 Живіть довго і процвітайте
Hallo Gunnar,
Wenn du Verschiebung und Skalierung kombinieren willst, müsstest du das in einer transform-Deklaration tun...
Man sollte hier darauf hinweisen, dass die Elemente eines Transforms von hinten nach vorne angewendet werden. Und diese Elemente folgen nicht dem Kommutativgesetz!
Heißt:
transform: translate(0, 100px) scale(2); skaliert das Element zunächst an Ort und Stelle (je nach transform-origin, natürlich) und schiebt dann das Skalierungsergebnis (das Skalat?!) 100px entlang der Y-Achse. Also nach unten.
transform: scale(2) translate(0, 100px); verschiebt das Element zunächst um 100px entlang der Y-Achse. Der Transform-Origin wird aber nicht mitverschoben, deshalb verdoppelt der scale(2) auch den Translate-Vektor.
Nutzt man die CSS Eigenschaften scale, translate und rotate statt der Transform-Funktionen, dann
Das steht in der Spec - wie so oft - missverständlich: CSS Transforms 2. Da ist eine Reihenfolge aufgeführt, wie die resultierende Transformationsmatrix gebildet wird und schön nach 1,2,3,4,5 durchnummeriert, aber der Lineare Algebrant weiß, dass die zuletzt hinzumultiplizierte Transformation als erstes ausgeführt wird.
Zusammengefasst wird diese Reihenfolge eingesetzt, wenn transformiert wird:
Rolf
Nutzt man die CSS Eigenschaften scale, translate und rotate statt der Transform-Funktionen, dann
gibt man die Flexibilität auf, die Reihenfolge der Operationen bestimmen zu können.
Aha, da wäre also schon die Antwort auf meine letzte Frage, welche ich vorhin an Gunnar stellte.
Was das alles genau heißt, ja das muss ich noch recht oft lesen.
Servus!
Ich würde ja am Liebsten immer nur die entsprechenden Artikel im SELF-Wiki verlinken, aber da fehlt uns irgendwo irgendetwas:
Nutzt man die CSS Eigenschaften scale, translate und rotate statt der Transform-Funktionen, dann
gibt man die Flexibilität auf, die Reihenfolge der Operationen bestimmen zu können.
Hier bräuchte man ganz am Anfang des Tutorials ein etwas komplexeres Beispiel, bei dem man
transform: scale() etwas vergößert,transform: translate() scale() erst skaliert und dann an seinen vorherigen Platz verschoben wird.Die einzelnen Funktionen könnte man evtl. bei CSS/Funktionen anlegen. Irgendwie müsste man da alles umschmeißen.
Aha, da wäre also schon die Antwort auf meine letzte Frage, welche ich vorhin an Gunnar stellte.
Was das alles genau heißt, ja das muss ich noch recht oft lesen.
Oder schreiben … Hättest du Lust, im Wiki aktiv zu werden?
Herzliche Grüße
Matthias Scharwies
Ich würde ja am Liebsten immer nur die entsprechenden Artikel im SELF-Wiki verlinken, aber da fehlt uns irgendwo irgendetwas:
Ja, manches finde ich da auch nicht. Aber ich mag keine anderen Quellen studieren und nennen, sonst komme ich noch mehr ins Schleudern. Obwohl ...
Ich finde ja auch das Beispiel nicht mehr, wo Stefan (oder wer auch immer aktiv im Wiki schreibt) echt mehrere solcher Befehle in je eine Zeile schrieb. Was ich dann nachahmte, was aber SO nicht ging.
Hier bräuchte man ganz am Anfang des Tutorials ein etwas komplexeres Beispiel,
OMG! Bitte nicht! Mir sind diese ersten Einführungs-Beispiele oft schon zu kompliziert! Weil die sind oft mit weiteren Sachen kombiniert und ich muss die dann immer abspecken, bis ich den Core der Funktionen erkenne.
Was das alles genau heißt, ja das muss ich noch recht oft lesen.
Oder schreiben … Hättest du Lust, im Wiki aktiv zu werden?
Du meinst jetzt aber nicht mich?
Servus!
Ich würde ja am Liebsten immer nur die entsprechenden Artikel im SELF-Wiki verlinken, aber da fehlt uns irgendwo irgendetwas: Ja, manches finde ich da auch nicht. Aber ich mag keine anderen Quellen studieren und nennen, sonst komme ich noch mehr ins Schleudern. Obwohl ...
Ich finde ja auch das Beispiel nicht mehr, wo Stefan (oder wer auch immer aktiv im Wiki schreibt) echt mehrere solcher Befehle in je eine Zeile schrieb. Was ich dann nachahmte, was aber SO nicht ging.
Wer ist Stefan?
Hier bräuchte man ganz am Anfang des Tutorials ein etwas komplexeres Beispiel, OMG! Bitte nicht!
Danke für das Feedback - nur so können wir uns verbessern
Mir sind diese ersten Einführungs-Beispiele oft schon zu kompliziert!
CSS/Tutorials/Transform#translate
Ist die Animation schon zu kompliziert?
Die nächsten zwei sind in einem fortlaufenden Tutorial eher felh am Platze.
CSS/Tutorials/Transform#scaleX.2C_scaleY_und_scaleZ
Das ist ja ganz nett - eigentlich würde man jetzt aber eine Skalierung in Kombination mit der Verschiebung erwarten, die das ganze eben aufbauend erklärt. Dann hätte man eben die Kombination der Transformationen gleich am Afang.
Weil die sind oft mit weiteren Sachen kombiniert und ich muss die dann immer abspecken, bis ich den Core der Funktionen erkenne.
Könntest du mir da ein besonders schlimmes Beispiel geben? Evtl. auch als PN?
Was das alles genau heißt, ja das muss ich noch recht oft lesen.
Oder schreiben … Hättest du Lust, im Wiki aktiv zu werden?
Du meinst jetzt aber nicht mich?
Doch erst nur ausbessern, besssere Beispiel finden und dann nach Lektüre von einem guten Tutorial irgendwo anders eben eines dieser „verbesserungswürdigen“ Tutorials auf den neuesten Stand bringen.
Herzliche Grüße
Matthias Scharwies
Wer ist Stefan?
Vielleicht meint er einen gewissen Stefan Münz ;-)
Servus!
Wer ist Stefan?
Vielleicht meint er einen gewissen Stefan Münz ;-)
Nach der Vereinsgründung 2004 war er unser 1. Vorsitzender, mochte sich aber an der Entwicklung von SELFHTML9 nicht mehr so intensiv beteiligen. Sein Weggang im Januar 2007 kam für Insider wohl nicht ganz so überraschend und ist jetzt über 15 Jahre her.
Ich weiß aber, dass das vielen gar nicht so bewusst ist.
Herzliche Grüße
Matthias Scharwies
Sein Weggang im Januar 2007
Echt? Wie die Zeit vergeht, kaum schaut man nur alle 10-15 Jahre vorbei, ist schon was vorbei ...
Was macht der denn jetzt so?
Wer ist Stefan?
Also für mich alten Knacker ist SELFHTML immer noch Stefan Münz. Ich kenne dessen Publikationen noch von unser aller Anfangszeit, als er die "Energie des Verstehens" erstmalig an uns Normalsterbliche abgab. Ja, inzwischen ist viel Zeit vergangen, das Projekt in viele Richtungen gewachsen. Klar, da sind nun viele andere mit dabei.
Beispiel geben
Zum Bleistift eben das im Startpost genannte allererste Beispiel zu Transition. Oke, die dargestellten Lektionen sind eh einfach - aber macht man Frickl auf, sind da soviel mehr Codes - die oft nicht nötig sind. Eben bei https://wiki.selfhtml.org/wiki/CSS/Tutorials/Animation/Transition#transition habe ich das alles auf 2 oder 3 Zeilen abgespeckt, funzt immer noch und wurde dann klarer (ok, das Kombinieren mehrere solcher Effekte habe ich dann voll vergeigt.)
Das ist aber kein "besonders schlimmes Beispiel", gell! Es ist nur, was mir halt auffällt. Man kann es evtl. auch noch dödelsicherer erklären, aber ich glaube, man sollte heutzutage nicht mehr erwarten, dass uns eine inzwischen so komplexe Materie noch wie das ABC oder kleine 1x1 erklärt wird.
Ich kann hier zwar die unglaublichsten DAU Fragen stellen, aber hier aktiv was einzubringe würde vllt. das Internet kaputtmachen.
Hallo,
Was das alles genau heißt, ja das muss ich noch recht oft lesen.
Oder schreiben … Hättest du Lust, im Wiki aktiv zu werden?
Du meinst jetzt aber nicht mich?
doch, unbedingt. Du gehst jetzt gerade mit ... sagen wir mal, Halbwissen ins Rennen. Du probierst, du suchst Informationen aus verschiedenen Quellen und kommst hoffentlich irgendwann ans Ziel. Damit wärst du der ideale Kandidat, um das auch für andere festzuhalten.
Wir haben in der Firma eine auf Microsoft OneNote basierende Wissens-Sammlung zu ganz verschiedenen Themen. Etwa: Wie stelle ich einen Urlaubsantrag? Was muss ich bei Bestellungen beachten? Welche Kostenstelle ist für welche Bestellungen zuständig? Wie unterschreibe ich Dokumente digital mit Foxit Phantom PDF? Wie löse ich einen Fertigungsauftrag aus?
Und ganz ehrlich: Die wertvollsten Ergänzungen kommen da regelmäßig von neuen Kollegen in der Einarbeitungsphase.
Einen schönen Tag noch
Martin
Damit wärst du der ideale Kandidat, um das auch für andere festzuhalten.
SELFHTML ist der heilige Kral der Webentwicklung!
Bei SELFHTML Inhalt einzubringen, wäre ja als würde ich (ein kleiner Provinz-Journalist aus dem winzigen AT-Land) in die Presseabteilung der New York Times berufen.
n'Abend,
Damit wärst du der ideale Kandidat, um das auch für andere festzuhalten.
SELFHTML ist der heilige Kral der Webentwicklung!
na, also ganz so sakral würde ich das nicht formulieren.
Bei SELFHTML Inhalt einzubringen, wäre ja als würde ich (ein kleiner Provinz-Journalist aus dem winzigen AT-Land) in die Presseabteilung der New York Times berufen.
Ja und? Dann gibt's da eine Handvoll erfahrener Journalisten im Hintergrund, die das redigieren, ergänzen, ausbauen. Aber der Beitrag eines neuen Redakteurs, der erstmal ohne Scheuklappen, ohne Tunnelblick an die Sache rangeht, der nicht schon jahrelang betriebsblind ist, hat trotzdem seinen Wert.
Einen schönen Tag noch
Martin
@@Killua
SELFHTML ist der heilige Kral der Webentwicklung!
Der Král schreibt sich aber mit
(spoiler)
Strich überm a: král
🖖 Живіть довго і процвітайте
Der Král schreibt sich aber mit Strich überm a: král
Eigentlich mit "G", wie Wikipedia meint! (das kommt davon, wenn man heute mit einem Verlag namens "Kral" hin und her mailte)
Hallo
Der Král schreibt sich aber mit Strich überm a: král
Eigentlich mit "G", wie Wikipedia meint!
Ne, ne, das „K“ in „Krahl“ war schon richtig. Es fehlte nur das „h“. *scnr*
Tschö, Auge
Hallo,
Der Král schreibt sich aber mit Strich überm a: král
Eigentlich mit "G", wie Wikipedia meint!
Ne, ne, das „K“ in „Krahl“ war schon richtig. Es fehlte nur das „h“. *scnr*
Lebt der in einem Kraal?
Gruß
Kalk
Hi,
Der Král schreibt sich aber mit Strich überm a: král
Eigentlich mit "G", wie Wikipedia meint!
Ne, ne, das „K“ in „Krahl“ war schon richtig. Es fehlte nur das „h“. *scnr*
Lebt der in einem Kraal?
Wenn Ihr nicht bald damit aufhört, gibt's was auf die Krallen, Ihr Krawallbrüder!
cu,
Andreas a/k/a MudGuard
@@Tabellenkalk
Der Král schreibt sich aber mit Strich überm a: král
Eigentlich mit "G", wie Wikipedia meint!
Ne, ne, das „K“ in „Krahl“ war schon richtig. Es fehlte nur das „h“. *scnr*
Lebt der in einem Kraal?
Nein, der lebt Am Fenster.
🖖 Живіть довго і процвітайте
@@Gunnar Bittersmann
Der Král schreibt sich aber mit Strich überm a: král
Eigentlich mit "G", wie Wikipedia meint!
Ne, ne, das „K“ in „Krahl“ war schon richtig. Es fehlte nur das „h“. *scnr*
Lebt der in einem Kraal?
Nein, der lebt Am Fenster.
Für die Kulturbanausen, denen man das erklären muss: Am Fenster (live mit Hassbe an der zweiten Geige).
Und für die, die nicht genug bekommen können: die Langfassung.
🖖 Живіть довго і процвітайте
@@Gunnar Bittersmann
Für die Kulturbanausen, denen man das erklären muss: Am Fenster (live mit Hassbe an der zweiten Geige).
Oops, Kulturbanause ich. Die sieht ganz schön groß aus für ’ne Geige. Könnte man glatt Bratsche zu sagen.
🖖 Живіть довго і процвітайте
Hallo Gunnar,
was ist der Unterschied zwischen Geige und Bratsche?
Die Bratsche brennt länger…
Rolf
Hallo Killua,
Bei SELFHTML Inhalt einzubringen, wäre ja als würde ich (ein kleiner Provinz-Journalist aus dem winzigen AT-Land) in die Presseabteilung der New York Times berufen.
Du bist herzlich eingeladen, dich beim Offenen Selfhtml Discord-Stammtisch sehen und beschnuppern zu lassen. Der Forenbeitrag dazu ist nicht mehr angepinnt, aber hier ist er. Der Termin ist regelmäßig alle 2 Wochen, der nächste ist eigentlich erst nächste Woche, aber in der letzten Zeit war eigentlich jeden Mittwoch jemand da. Kann 30 Minuten dauern oder 3 Stunden, je nach Lust und Laune. Bier kann in beliebiger Menge downgeloadet werden, wenn Du den passenden Adapter dafür hast.
Rolf
Hallo Matthias,
ich habe in den letzten 2h schon einiges erweitert. Aber vermutlich auf einem zu komplexen Level. Und deine einzelne Typo-Korrektur, die mir eine Bearbeitungskollision eintrug, hat mir beinah einen Herzinfarkt bereitet 😂
Das Beispiel in der custom properties Animation ist verbesserungsnötig. Denn Du machst Dir mit der @supports-Klausel genau diese Animation wieder kaputt und reduzierst sie auf die scale-Animation.
Ich pass das mal an.
Update: Jetzt kapiere ich - das ist Absicht. Du möchtest zeigen, wie es entweder mit custom properties oder mit Einzeleigenschaften funktioniert. Aber das ist nicht sehr klar erkennbar. Ich hirne...
Rolf
Servus!
Hallo Matthias,
ich habe in den letzten 2h schon einiges erweitert. Aber vermutlich auf einem zu komplexen Level. Und deine einzelne Typo-Korrektur, die mir eine Bearbeitungskollision eintrug, hat mir beinah einen Herzinfarkt bereitet 😂
Sorry, das gibt einen Extra-Glühwein!
Hatte grad Online-Elternabend und immer wieder mal 5 min Pause.
Herzliche Grüße
Matthias Scharwies
Herzinfarkt 😱
OMG! Wegen mir müsst ihr nichts umkrempeln!
Ich kapiere es ja doch immer erst nach einigen nervigen Fragen im Forum. Wenn überhaupt. Damit es solche wie ich kapieren, müsstet ihr SELFHTML auf das Niveau einer Baumschule runterdrehen. Echt.
Hallo Killua,
nee, wir krempeln, wenn es uns selbst nicht mehr gefällt. Und Fragen wie Deine weisen auf Lücken hin, deshalb <no-irony>vielen Dank</no-irony> dafür.
Dafür steh ich jetzt vor der blöden Frage, ob man den Abschnitt über custom property Animation ganz rausschmeißt, denn Chrome kennt seit 3 Monaten endlich die Einzeleigenschaften rotate/scale/translate, während Firefox bei Houdini CSS (die @property-Regel) nicht aus den Puschen kommt.
Rolf
Und Fragen wie Deine weisen auf Lücken hin
Wow ... (blindes Huhn findet Korn)
während Firefox ... nicht aus den Puschen kommt.
Eh steil, dass es Jahrhunderte nach den Browserkriegen noch immer kleine, feine Unterschiede sogar zwischen den großen Browsern gibt. Da sind wir den MS Internet-Explodierer losgeworden, nur wenige wissen heute, dass Netscape einst keine Espressokapseln vertrieben hat und dennoch gibts da immer noch einer (oder mehrere?) der aus der Reihe tanzt.
Wünsche dann noch frohes krempeln
Guten Morgen!
Ich hab jetzt mal ein bisschen gehirnt:
Wir haben 2 (3) Tutorials:
Mittlerweile ist das in einem Modul (CSS + SVG zusammen) spezifiziert:
Ich habe mir dort den Aufbau angeschaut:
translate, scaleund rotate.transform-style, perspectiveund backface-visibilityein. → würde ich im vorhandenen Kapitel 3d-Transformationen abhandelnIch würde ja am Liebsten immer nur die entsprechenden Artikel im SELF-Wiki verlinken, aber da fehlt uns irgendwo irgendetwas:
Nutzt man die CSS Eigenschaften scale, translate und rotate statt der Transform-Funktionen, dann
gibt man die Flexibilität auf, die Reihenfolge der Operationen bestimmen zu können.
Hier bräuchte man ganz am Anfang des Tutorials ein etwas komplexeres Beispiel, bei dem man
- mit
transform: scale()etwas vergößert,- was dann woanders steht und
- mit
transform: translate() scale()erst skaliert und dann an seinen vorherigen Platz verschoben wird.
Ich würde im Tutorial anfangs die translate-Eigenschaft anhand dieses neuen Beispiels einführen.
translate: 10em 100px;entspricht der normalen CSS-Syntax wie bei anderen Eigenschaften auch.
Dann kann man den vorhandenen Abschnitt über scale nach oben ziehen.
Hier wäre eben meine Frage, ob
Die einzelnen Funktionen könnte man evtl. bei CSS/Funktionen anlegen. Irgendwie müsste man da alles umschmeißen.
Da stellt sich mir die Frage, ob man für jede Funktion ein eigenes Beispiel benötigt, oder ob man ein Beispiel erstellt, in dem zwei Funktionen gegenübergestellt werden. Optimalerweise wäre das dann eben noch ein Beispiel aus der Praxis.
Wenn ihr das ok gebt, würde ich das 1. Kapitel mit den „einfacheren“ Eigenschaften translate, scale und rotate am Wochenende schreiben.
Sollte man die beiden vorhandenen Tutorials zu einem zusammenfassen?
Oder schreiben … Hättest du Lust, im Wiki aktiv zu werden?
wenn Du Journalist bist, gibt es eigentlich wirklich keinen Grund noch abzulehnen. 😀
Herzliche Grüße
Matthias Scharwies
Anmerkung:
Die Werte der einzelnen Eigenschaften und Parameter der Funktion sollten in einer Referenz übersichtlich gezeigt werden.
Ein Tutorial sollte das Thema anhand von attraktiven Beispielen entwickeln.
Herzliche Grüße
Matthias Scharwies
Servus!
Guten Morgen!
Ich hab jetzt mal ein bisschen
gehirnt/ gewirbelt:Stand heute
Wir haben
2 (3)nur noch ein Tutorial:
Das ist jetzt unter …
zusammengefasst. Die Werte der einzelnen Eigenschaften und Parameter der Funktion sollten in einer Referenz übersichtlich gezeigt werden.
Ein Tutorial sollte das Thema anhand von attraktiven Beispielen entwickeln. Die neuen Einzeleigenschaften zeigen jetzt erst
Jetzt würde ich Rolfs zwei Abschnitte nach vorne ziehe:
Vorher nehm' ich aber noch kurz die skew-Navigation mit nach oben, der Rest der Beispiele scheint mir nicht mehr attraktiv, da würde ich auf die Übersicht der transfom-Funktionen verweisen.
Dann kommt entweder das Transform/Drehen,_Kreisen_und_Pendeln- Kapitel oder ...
Das mach ich am Wochenende weiter!
Herzliche Grüße
Matthias Scharwies
Guten Morgen!
Ich weiß grad nicht weiter: ein Tutorial soll ja …
Transform/SVG-Transformationen (Test-Wiki)
Das war ja ursprünglich (2015) ein Einzel-Tutorial, das das transform-Atttribut erklärt hat.
Heute (2022) ist es Unterkapitel im CSS-Tutorial [1] und das transform-Attribut kann als Präsentationsattribut auch als CSS-Eigenschaft notiert werden.
Ich wollte eigentlich das bestehende 1. Kapitel weitgehend so lasssen und erst im 2. Kapitel auf Unterschiede zwischen SVG und CSS eingehen.
Andererseits verwenden einige Beispiele animateTransform (SMIL)[2], was unser Frickl in Verbindung mit Firefox nicht kann (deshalb die Vorlage:Frickl-Vorschau)
Fragen:
1. #transform-Attribut: Wie kann man die transform-Funktionen so kennzeichnen, dass sichtbar ist, welche in CSS gehen und welche nur innerhalb des transform-Attributs?
2. #CSS_vs._transform-Attribut - Soll man das nach vorne ziehen und die alten Beispiele und Erklärungen entsorgen?
3. #CSS_vs._transform-Attribut Wie sollte dieses Unterkapitel heißen?
4. Die oben genannten Abschnitte 1.1-1.4 würde ich durch solche Vergleiche ersetzen: #Verschiebungen - Habt ihr da Vorschläge, Anregungen, Farbgestaltung, etc ...
Herzliche Grüße
Matthias Scharwies
transform ist nicht mehr in der SVG2-Spec, sondern in einem CSS Transforms Module Level 2spezifiziert. ↩︎
die Beispiele sind alt - im Produktions-Wiki gibt es neuere, die aber eben oft unübersichtlich sind, da es dort viele transformierte Objekte gibt. Besser ist eine CSS(?)-Animation oder eben nur wenige Objekte, deren Werte man im Frickl / Seiteninspektor ändert. ↩︎
Hallo Matthias,
ich lass Dich nicht gerne hängen, aber ist in dem Thema außer Dir irgendwer sattelfest? Gerade bei SMIL kann ich gar nicht mitreden.
Aber beim transform-Attribut dachte ich bisher, dass die CSS Eigenschaft transform für SVG Elemente die gleichen Funktionen unterstützt wie das Attribut (bis auf das Thema Einheiten und Prozente), und dass alle SVG Transformfunktionen auch im CSS für HTML funktionieren würden - sprich: transform für SVG ist eine Teilmenge von transform für HTML. Oder?
Demnach müsste man doch bei den Funktionen nur markieren, welche auch in SVG erlaubt sind.
Das Thema attribut vs CSS Eigenschaft würde ich vorne erledigen, mit ein paar Worten hinter "Seit SVG2 ist es ein Präsentationsattribut, das nun auch in CSS festgelegt werden kann." Das ist kein Tutorial-Artikel (steht zumindest nicht im Namen), da kann man sowas machen.
Ana Tudor geht in ihrem Tutorial auf Unterschiede zw. HTML und CSS ein.
Tut sie nicht, sie behandelt Unterschiede zw. HTML und SVG. Die sind real und können Dir durchaus ein Bein stellen, sobald der transform-origin für eine Transformfunktion relevant wird. Aber wie das genau stattfindet, müsste ich mir auch selbst erst nochmal anschauen. Ich denke, bei SVG ist die Angabe des transform-origin viel wichtiger als in HTML, weil HTML den Mittelpunkt des Elements per Default verwendet und das oft eine gute Ausgangsbasis ist. Bei SVG ist das komplizierter, weil auch transform-origin nicht relativ zum Grafikelement angegeben wird, sondern relativ zum Koordinatenursprung. Meine ich...
Rolf
Servus!
Hallo Matthias,
ich lass Dich nicht gerne hängen, aber ist in dem Thema außer Dir irgendwer sattelfest?
Ich ja auch nicht!
Gerade bei SMIL kann ich gar nicht mitreden.
Das war 2001 wohl geil; lief aber nicht im IE. Mittlerweile ist es aufgrund der guten Unterstützung von CSS-Animations wohl echt obsolet,
Aber beim transform-Attribut dachte ich bisher, dass die CSS Eigenschaft transform für SVG Elemente die gleichen Funktionen unterstützt wie das Attribut (bis auf das Thema Einheiten und Prozente), und dass alle SVG Transformfunktionen auch im CSS für HTML funktionieren würden - sprich: transform für SVG ist eine Teilmenge von transform für HTML. Oder?
Ja, stimmt! alle transform-Funktionen laufen in der transform-Eigenschaft, selbst ...3d()und im Attribut eben nur die „normalen“.
Demnach müsste man doch bei den Funktionen nur markieren, welche auch in SVG erlaubt sind.
Ja, so hab's ich ja gemacht: #transform-Attribut
Nur am Text müsste man noch feilen. Evtl ein * und unten „* Diese Funktionen sind im Transform-Attribut erlaubt.“
Das Thema attribut vs CSS Eigenschaft würde ich vorne erledigen, mit ein paar Worten hinter "Seit SVG2 ist es ein Präsentationsattribut, das nun auch in CSS festgelegt werden kann." Das ist kein Tutorial-Artikel (steht zumindest nicht im Namen), da kann man sowas machen.
Ana Tudor geht in ihrem Tutorial auf Unterschiede zw. HTML und CSS ein.
Tut sie nicht, sie behandelt Unterschiede zw. HTML und SVG.
Oh Gott - hab ich das geschrieben?
Ich suche seit drei Tagen ein Adjektiv, das beschreibt, wie die 2015er Version des Tutorials die Verwendung des transform-Attributs erklärt und jetzt 2022, ausgehend von der „bereits bekannten“ transform-Eigenschaft in CSS und den CSS-Verhaltensweisen plötzlich nicht transform, sondern die Besonderheiten von SVG erklärt werden.
bizarr ist es nicht und auch nicht kurios, schräg, komisch ...
Die sind real und können Dir durchaus ein Bein stellen, sobald der transform-origin für eine Transformfunktion relevant wird. Aber wie das genau stattfindet, müsste ich mir auch selbst erst nochmal anschauen. Ich denke, bei SVG ist die Angabe des transform-origin viel wichtiger als in HTML, weil HTML den Mittelpunkt des Elements per Default verwendet und das oft eine gute Ausgangsbasis ist.
Ja, da werd' ich die Infografik zu Rotationen in CSS und SVG nachzeichnen. In SVG muss man da das Element um den Ursprung zeichnen und dann nach der Drehung verschieben. →
Bei SVG ist das komplizierter, weil auch transform-origin nicht relativ zum Grafikelement angegeben wird, sondern relativ zum Koordinatenursprung. Meine ich...
Laut Spec müsste auch transform-origin gehen. Muss ich testen.
Danke für deine Antwort
Herzliche Grüße
Matthias Scharwies
Ich mach da die Tage weiter. Haben problematische WhatsApp-Chats in der 5. und jede Menge Gespräche zur Zeit. 😟
Servus!
Bei SVG ist das komplizierter, weil auch transform-origin nicht relativ zum Grafikelement angegeben wird, sondern relativ zum Koordinatenursprung. Meine ich...
Laut Spec müsste auch transform-origin gehen. Muss ich testen.
Problem: wo ist denn die Mitte eines rects? - Bei ellipse und circle ist es eben cx,cy.
Herzliche Grüße
Matthias Scharwies
Hallo,
Problem: wo ist denn die Mitte eines rects? - Bei ellipse und circle ist es eben cx,cy.
ähm, im Schnittpunkt der Diagonalen? Odernichoderdoch?
Und damit: Mittelwert der 4 x-Koordinaten, Mittelwert der 4 y-Koordinaten.
Oder worauf willst du mit der Frage hinaus?
Einen schönen Tag noch
Martin
Servus!
Hallo,
Problem: wo ist denn die Mitte eines rects? - Bei ellipse und circle ist es eben cx,cy.
ähm, im Schnittpunkt der Diagonalen? Odernichoderdoch?
Und damit: Mittelwert der 4 x-Koordinaten, Mittelwert der 4 y-Koordinaten.
Oder worauf willst du mit der Frage hinaus?
Braucht man JS, oder kann man das mit calc() und custom properties lösen? Das wäre mal wirklich was neues!
Herzliche Grüße
Matthias Scharwies
Hallo Matthias,
tja, wenn man jetzt Mathelehrer wäre, gelle 😉
Wenn du x,y,width und height als custom properties hast, dann bekommst Du das Zentrum des Rechtecks ganz einfach so:
.foo {
transform-origin: calc(var(--x) + 0.5*var(--width)),
calc(var(--y) + 0.5*var(--height));
Rolf
Hallo Rolf,
Wenn du x,y,width und height als custom properties hast, dann bekommst Du das Zentrum des Rechtecks ganz einfach so:
.foo { transform-origin: calc(var(--x) + 0.5*var(--width)), calc(var(--y) + 0.5*var(--height));
aber nur, wenn die Seiten des Rechtecks zunächst parallel zu den Koordinatenachsen liegen. Ist das Rechteck aber von Haus aus schon irgendwie schräg, wird es komplizierter.
Einen schönen Tag noch
Martin
Hallo Martin,
irgendwie schräge Rechtecke gibt's in SVG nicht. Die werden gerade gemalt und dann irgendwie schräg gemacht. Find ich.
Rolf
n'Abend Rolf,
irgendwie schräge Rechtecke gibt's in SVG nicht. Die werden gerade gemalt und dann irgendwie schräg gemacht. Find ich.
ist das wirklich so? - Ich hab schon öfter mal in Standalone-SVGs (z.B. in Dia erstellt) total schiefe Rechtecke anhand ihere vier Ecken definiert. Ist das so ungewöhnlich?
Einen schönen Tag noch
Martin
@@Der Martin
irgendwie schräge Rechtecke gibt's in SVG nicht. Die werden gerade gemalt und dann irgendwie schräg gemacht. Find ich.
ist das wirklich so? - Ich hab schon öfter mal in Standalone-SVGs (z.B. in Dia erstellt) total schiefe Rechtecke anhand ihere vier Ecken definiert. Ist das so ungewöhnlich?
Dann musst du aber die Koordinaten der Eckpunkte genau berechnen; bzw. die Richtungsvektoren der Seiten. Wenn diese nicht genau rechtwinklig aufeinanderstehen, gibt’s ein Parallelogramm.
Wenn du nur horizontale und vertikale Linien verwendest, hast du ein Rechteck. Das bleibt auch bei einer Rotation ein Rechteck.
🖖 Живіть довго і процвітайте
Servus!
Vielen Dank Euch dreien! Das lass ich mal sacken und fang' dann wieder an!
Herzliche Grüße
Matthias Scharwies
Ein Zwischenstand ist online:
Wir haben jetzt 12 Tage Arbeit reingesteckt und der Fragende hat immer wieder beteuert, dass es das eigentlich gar nicht braucht. 😉
Herzliche Grüße
Matthias Scharwies
@@Rolf B
… ganz einfach so:
.foo { transform-origin: calc(var(--x) + 0.5*var(--width)), calc(var(--y) + 0.5*var(--height));
Die Multiplikation mit einer Kommazahl ist nicht einfach. Die Divison durch eine ganze Zahl ist es – so:
.foo {
transform-origin: calc(var(--x) + var(--width)/2),
calc(var(--y) + var(--height)/2);
🖖 Живіть довго і процвітайте
Hallo Gunnar,
hä? Das ist dem calc doch wohl wurscht. Deswegen gleich den Rotstift rauszuholen...
Rolf
@@Rolf B
hä? Das ist dem calc doch wohl wurscht.
Dem Computer ist das Wurst. Es geht darum, Code für Menschen leicht lesbar zu machen.
Deswegen gleich den Rotstift rauszuholen...
Ja, deswegen.
🖖 Живіть довго і процвітайте
danach überschreibst du diese mit
transform: scale(5); der vorige Wert ist damit futsch.
Logisch.
Ob mans glaubt oder nicht, ich habe es zuallererst eh kombiniert versucht, nur weil da nix ging und weil ich eine ähnliche Vorgangsweise auch im Wiki fand, (die ich klarerweise nicht mehr finde) daher habe ich die Sachen dann extra notiert.
Das im Startpost genannte ist ja nur der letzte Versuch, weil ich habe vorher zwischen den Anweisungen mal Komma, mal Semikolon gesetzt, mal diese mal die andere Methode (das mit den Eigenschaften) genommen - und - jedesmal wahrscheinlich genau verkehrt getrennt.
Wenn du Verschiebung und Skalierung kombinieren willst, müsstest du das in einer
transform-Deklaration tun:.headerlogo:hover { transform: translateY(-1000px) scale(5); }
Aha OHNE Trennung, darauf kam ich gar nicht! Habs eben mit , oder ; - es ging nix. Danke!!
Oder du verwendest die CSS-Eigenschaften [
translate]
Eigenschaften heißt dies, ... hmm ... Kompliziert das ist.
.headerlogo:hover { translate: 0 -1000px; scale: 5; }
Ist da nur die Schreibweise anders oder?
Nachtrag: Das wurde eh in der 2. Antwort behandelt
@@Killua
Aha OHNE Trennung, darauf kam ich gar nicht!
Du hättest nachschlagen können.
Habs eben mit , oder ; - es ging nix.
Mit Komma hätte ja sein können – ist es aber nicht.
Mit Semikolon kann gar nicht gehen. Semikolons trennen Deklarationen innerhalb einer Regel.
transform: translateY(-1000px); scale(5); besteht aus der Regel transform: translateY(-1000px) und dem ungültigen Code scale(5).
Eigenschaften heißt dies, ... hmm ... Kompliziert das ist.
Ist es das? Übersicht über die (englischen) Begriffe.
Für HTML habe ich auch sowas.
Ist da nur die Schreibweise anders oder?
Nachtrag: Das wurde eh in der 2. Antwort behandelt
TL;DR: Matrixmultiplikation ist nicht kommutativ.
🖖 Живіть довго і процвітайте
Du hättest nachschlagen können.
Ne, ich kann kaum englisch, suche daher immer DE Tuts. (und per Translator übersetzen ist auch bescheiden, bei manchen Sites wird dann der Quellcode mit übersetzt)
Mit kompliziert meine ich, dass es da mal das mit transform: translate() gibt und nochmal als Funktion. Wer weiß, wie oft solche zu viele Wege zum gleichen Ziel führen. Funktionen, Methoden, Eigenschaften, Schlüsselwörter, Konstanten, Va... all diese und deren fachdenglischen Ausdrücke ... das ist für nicht gelernte Wochenendcoder schon viel. Egal ob CSS, JS, PHP, es ist "kompliziert".
Ihr Profis hier habt all diese Sachen wahrscheinlich schon in der Schule gelernt, irgendwas mit IT studiert und seid evtl. auch in dem Bereich selbständig oder angestellt.
Wer aber noch mit der Schreibmaschine aufwuchs und sich als Kind über das erste echte Festnetztelefon, Farb-Röhren-TV, Videorecorder freute, den ersten PC als Ü20 sah - der tut sich da schwerer ...
Sorry, aber ich habe hier komplett den Überblick verloren, weiß nicht welche Posts mich ansprechen, welche internes betreffen usw.
Danke jedenfalls für die geplanten oder bereits vollzogenen(?) Optimierungen der Anleitungen. Ich tue mich weiterhin schwer, bin aber auch ein hoffnungsloser Fall.
Bez. Animation automatisch starten (auch diese meine Frage finde ich nicht mehr) habe ich es inzwischen ein bissl verstanden: Eine CSS Animation startet eh von selbst. (Machte nur 99 Fehler in 3 Zeilen und das startet dann nicht)
Doch für manche CSS Anim Sachen scheint man nicht ohne JS auszukommen.
Als Fan von so einer Art Parallax Effekten versuchte ich ja weiterhin dieses Tut zu kapieren, bzw. in eigenen HTMLs nachzubauen. Keine Chance, das tut alles, aber nicht was ich will und Verschiebung ist nicht.
Daher habe ich meine eigene Version solcher optischer Verschiebungen gebastelt. Wie ist erstmal nebensächlich, aber es bewegen sich Hintergründe, Logos, Überschrift wie gewünscht in verschiedenen Geschwindigkeiten usw. Doch der Kram startet nun entweder automatisch, oder wenn ichs so notiere, per Hover.
Die kurze Frage nach langer Einleitung ist nun: Wie kann man das so lösen, dass diese Effekte erst beim scrollen starten? Wäre das klar, würde ich den einfachsten CSS Parallax Effekt ever erfunden haben. Es reichen ja ein paar Zeilen, man muss nix an html, body und nix mit after, before machen - es geht auch anders und schaut super aus!
Nochmals Danke für die Überarbeitungen bez. Animationen, Transform Translate und wie das alles heißt!
PS: Nochmal der Hinweis: All das ist nur eine Spielerei und wird evtl. nie irgendwo live eingesetzt. Also bitte keine Einwände, wie sehr das stören kann, wie viele Ressourcen dabei draufgehen und wie wenig barrierefrei das wäre.
Hallo Killua,
Als Fan von so einer Art Parallax Effekten versuchte ich ja weiterhin dieses Tut zu kapieren, bzw. in eigenen HTMLs nachzubauen.
Aua. You nerd-sniped me 😟
Ich habe jetzt ein paar Stunden lang versucht, die transform-Variante dieses Tutorials auf einen sinnvollen Stand zu bekommen. Zum einen ist sie falsch benannt. Korrekt wäre: Mit perspektivischen 3D Effekten. Und zum anderen ist sie kaputt - das Ding tut nichts von dem, was es verspricht. Kann es eigentlich auch gar nicht, und sollte es auch nicht. Mit Perspektiveffekten bekommt man 2 Scrollgeschwindigkeiten hin, ja, aber das genau auszutarieren ist erstmal gar nicht so einfach und die Rahmenbedingungen untersuche ich gerade. Das Thema ist mir auch nicht ganz so vertraut.
Die Variante 1 mit background-position:fixed ist dagegen verwendbar; aber der Hintergrund ist dann eben starr.
Aber jetzt breche ich das erstmal ab 🥱
Rolf
Ich habe jetzt ein paar Stunden lang versucht, die transform-Variante dieses Tutorials auf einen sinnvollen Stand zu bekommen.
Wie gesagt, Danke an alle, die das überarbeiten; die sogar einem ewigen Dummie zuhören und versuchen, diese Dinge dödelsicher zu erklären. Glaube aber, das wird nie klappen. Es ist einfach alles zu komplex, es gibt so viele Wege zur gewünschten Anim, so viele Begriffe, die ich immer wieder durcheinanderbringe ...
Mit Perspektiveffekten bekommt man 2 Scrollgeschwindigkeiten hin, ja, aber das genau auszutarieren ist erstmal gar nicht so einfach
Mit so Sachen wie Z Achse, transform-style: preserve-3d; uvam. befasse ich mich erst, wenn ich die Grundlagen gut kann. Mir gehts nur darum, wie man die gewöhnlichen transform translate Sachen per Scroll starten kann.
Wie exakt das aussieht, ist mir erstmal völlig wurst, ich will nur wissen, wie man das mit CSS oder wenn es sein muss mit JS auslösen kann.
Ich habe da ein paar Begriffe aufgeschnappt:
da gäbe es was mit scroll-, weiß aber nicht, ob das (oder eins der ähnlich klingenden Sachen) das ist, was ich suche?
Das JS da könnte evtl. auch dafür brauchbar sein? So ähnlich müsste man doch irgendwie abfragen können, ob gescrollt wird, wenn ja, dann starte die Bewegungen ...
Ja und dann fand ich noch einige Bibliotheken für so Effekte. Wie dieses skrollr. Leider weiß ich bei Verweisen auf Github nie, was von den vielen Sachen muss ich nun runterladen, was gehört wohin usw.
Die Variante 1 mit background-position:fixed ist dagegen verwendbar;
Eh klar und in einer Sekunde erledigt. Geschickt designt, kann das auch dieses einfachste Lösung gut aussehen. Aber halt nicht so cool "perspektivisch" wie wenn man 2 oder mehr Elemente in unterschiedlichen Geschwindigkeiten bewegt.
Update:
Ich habe nun was tolles gefunden, mit dem man sich zumindest das mit dem Scrollen und Anim starten einfach machen kann: https://dixonandmoe.com/rellax/
Dieses kleine JS animiert Elemente, welche die Class rellax drin haben. Dazu einen Parameter bez. Scrollgeschwindigkeit angeben, fertig.
Ja ist halt keine reine CSS Sache, aber Dödelsicher. Sicher kann man auch aus dem JS ein bissl lernen, wie das denn ginge.
Nachfrage:
kann man einem so animierten Teil nicht irgendwie einen Schubs geben, dass es auch ohne Mausover-Hover weiter bewegt wird?
Weil wie ich eh wo meinte, solange die Maus über dem animierten Element ist, gehts. Aber im Falle einer X oder Y Bewegung fliegt es ja aus dem Mausberich. Dann ruckelt, zittert es und die Bewegung stoppt. Logisch, aber wie könnte man das noch lösen?
Was ich versuchte ist folgendes: Das png zeigt einige transparente Seifenblasen, welche beim Mausover (oder gäbe es noch andere Startevents?) quasi aufsteigen, skalieren und dann "platzen", bzw. verschwinden (also entweder riesig skalieren lassen oder nur aus dem Schirm fliegen, weiß noch nicht)
Das Problem ist wie gesagt, dass sich die Sache nur solange bewegt, solange die Maus über der Grafik ist. Ergo sollte es einen Trick geben, der die Bewegung fortsetzt oder das es überhaupt gar keiner Mausinteraktion bedarf ...
Ist aber nicht so wichtig.
Nachtrag zur Nachfrage:
Hier las ich folgenden Satz:
Ohne besonderes auslösendes Event (z.B. hover oder focus) starten CSS Keyframes-Animationen automatisch, wenn das Dokument im Browserfenster geladen wird.
Das gilt aber scheinbar nicht für die "normale" (hier besprochene) Animation ohne diese "Keyframes"?
So, 😴 gute N8, für heute gebe ich eh Ruhe ...
Servus!
Nachfrage:
kann man einem so animierten Teil nicht irgendwie einen Schubs geben, dass es auch ohne Mausover-Hover weiter bewegt wird?
Nachtrag:
Hier las ich folgenden Satz:
Ohne besonderes auslösendes Event (z.B. hover oder focus) starten CSS Keyframes-Animationen automatisch, wenn das Dokument im Browserfenster geladen wird.
Das gilt aber scheinbar nicht für die "normale" (hier besprochene) Animation ohne diese "Keyframes"?
Weil wie ich eh wo meinte, solange die Maus über dem animierten Element ist, gehts. Aber im Falle einer X oder Y Bewegung fliegt es ja aus dem Mausberich. Dann ruckelt, zittert es und die Bewegung stoppt. Logisch, aber wie könnte man das noch lösen?
CSS-Animationen starten mit dem Laden des Dokuments:
.animiert {
animation: orbit 12s infinite linear;
}
oder, wenn Du mit :hover oder :focus etwas auslöst:
.animiert:hover {
animation: orbit 12s infinite linear;
}
Wenn Du willst, dass Maushover überall wirkt, musst du das :hover auf den body setzen:
body: hover .animiert {
animation: orbit 12s infinite linear;
}
Das mit dem :hover ist aber ne Krücke. Touchgeräte haben gar kein :hover und manche mögen das hektische Gezuckel gar nicht.
Herzliche Grüße
Matthias Scharwies
CSS-Animationen starten mit dem Laden des Dokuments:
.animiert { animation: orbit 12s infinite linear; }
das habe ich nicht hinbekommen
oder, wenn Du mit :hover oder :focus etwas auslöst:
.animiert:hover { animation: orbit 12s infinite linear;
das schon
Wenn Du willst, dass Maushover überall wirkt, musst du das :hover auf den body setzen:
body: hover .animiert { animation: orbit 12s infinite linear;
Klar, oder halt irgendeinen größeren Bereich.
Aber die Frage ist 1. wie man das ohne diesen Trick automatisch und nachhaltig starten kann. Nur wie es aussieht, kann ich es nur mit :hover o.ä., egal ob transform oder animate starten. Automatisch tuts sich garnix.
Nur mit @keyframes, ja das startet sofort.
Egal, nicht so wichtig, war nur eine Nachfrage.
Das mit dem :hover ist aber ne Krücke. Touchgeräte haben gar kein :hover und manche mögen das hektische Gezuckel gar nicht.
Wie im Startpost gesagt, ich setze das nicht wirklich wo ein, ist nur Spielerei
Was ich aber gerne habe, sind eben Parallax Effekte - das gefällt mir sehr. Doch animieren brauche ich nicht wirklich. Es ist aber interessant, was man mit CSS alleine alles machen kann, wo früher Flash oder seitenweise JS nötig war: Heute in paar CSS Anweisungen, fertig. "Faszinierend"
Servus!
CSS-Animationen starten mit dem Laden des Dokuments:
.animiert { animation: orbit 12s infinite linear; }das habe ich nicht hinbekommen
Das habe ich aus den Animations-Tutorial:
Siehe auch hier:
Herzliche Grüße
Matthias Scharwies
Moin,
Wenn du dich für hover entscheidest und dein beschriebenes Problem beheben willst, empfehle ich dir einen unsichtbaren Helper.
<div class='helper'><div class='logo'></div></div>
Den Helper kannst du jetzt größer aber auch kleiner als das Element machen (oder gar in der Form ändern). Er sollte unsichtbar sein. Wenn der Helper z.B. 200x200px groß ist und das logo 100x100px, dann funktioniert der Hover in dem 200x200px großen Bereich. Du kannst es auch mit 100x100px anfangen lassen (somit also die Größe des Logos) und bei hover auf 200x200px vergrößern (natürlich ohne Animation 😉). Wichtig ist nur dass du deine css angaben umschreibst. Statt .logo:hover steht da jetzt .helper:hover .logo.
Da du jedoch etwas von "anstupsen" schreibst, wird hover wohl nicht das richtige für dich sein. Es klingt so als ob du etwas mit hover einschalten möchtest, aber dann dem USer die Möglichkeit nehmen möchtest mittels hover die Geschichte auch wieder aus zu schalten. Kurz, klingt nach etwas echt nervigem. Also entweder lässt du das hover die ganze Zeit oder du bedienst dich eines clickes.
Gruß
T-HoveRex
Hallo T-Rex,
man könnte auch mit JS auf den mouseover reagieren, und eine Klasse setzen, die die Animation auslöst.
Wenn die Klasse noch nicht da ist, startet man zusätzlich einen Timer, der nach X Sekunden die Klasse wieder entfernt. Oder eine zweite Klasse setzt, die zu einem "graceful shutdown" der Animation führt.
Aber ohne JS wird's nicht gehen. Meine ich. Gunnar? Ich halt gern dein Bier 😉
Rolf
@@Rolf B
Wenn die Klasse noch nicht da ist, startet man zusätzlich einen Timer, der nach X Sekunden die Klasse wieder entfernt. Oder eine zweite Klasse setzt, die zu einem "graceful shutdown" der Animation führt.
Das braucht man nicht. Guckst du.
Aber ohne JS wird's nicht gehen. Meine ich. Gunnar? Ich halt gern dein Bier 😉
Danke fürs Halten, aber mir ist auch nichts ohne JavaScript eingefallen.
Ich bin aber nicht so unvorsichtig und sage, es ginge nicht. 😏
🖖 Живіть довго і процвітайте
Hallo Gunnar,
weiß nicht ob ich nach 4 Tagen schon wieder alles vergessen habe - aber ich meine, wir hätten über eine Animation geredet, die nicht von allein aufhört. Also so, als ob Du in .moved das forwards durch infinite ersetzen würdest.
Das weitere Problem, das ich in deinem Pen sehe, ist, dass man nur einmal "stupsen" kann und die Animation danach nicht wieder gestartet werden kann.
*tisch für's bier hinstell*
Rolf
Kurz, klingt nach etwas echt nervigem.
Nochmal: Es ist nur eine Spielerei und wird so nie live eingesetzt!
Kurz, klingt nach etwas echt nervigem.
Nochmal: Es ist nur eine Spielerei und wird so nie live eingesetzt!
Ich hab den ganzen Tag nix besseres zu tun als in einem Forum einen ganzen Antworten Baum durch zu lesen um deine Hinweise zu finden 😂.
Danke für den Lacher am Morgen - ist ein guter Start in den Tag.
Ich hab den ganzen Tag nix besseres zu tun als in einem Forum einen ganzen Antworten Baum durch zu lesen um deine Hinweise zu finden 😂.
Sorry, aber deswegen schreibe ich solche Hinweise immer in den Startpost. Sofern ich das schon vorher weiß; sollte sich aber erst im Verlauf der Diskussion herausstellen, dass davon abzuraten ist oder so - dann steht es natürlich erst ab dem Post ...