JS/CSS: Wie rotiere ich ein Element 360 um einen bestimmten Punkt?

[floq0r]

Out of context ist das etwas schwer lesbar, aber solang es funktioniert - gut
Im ersten Block in Zeile 9 hast du (360.0 / languageIcons.length) nochmal extra, da kannst du auch anglePartition verwenden.
$.animate() von jQuery ist zwar nicht mit transform kompatibel, man kann aber eine dummy-transition machen und den aktuellen step aus dem step-Callback verwenden um eine flüssige Animation hinzubekommen. Das ist dann auch mit den easing-functions aus jQueryUI kompatibel: https://stackoverflow.com/questions/5462275/animate-element-transform-rotate

Ein Tipp wegen Loops, mir ist das auch schon oft passiert, dass während der dev die breaks nicht so greifen wie gedacht und dann schmiert der Tab ab. Deshalb baue ich zunächst immer ein safety ein:

var safety = 0;
while(<condition> && safety < 10000)
{
    ...
    safety++;
}

 

[Kokujou]

genau und so eine safety klausel hab ich auch drin

ich benutze übrigens kein jQuery sondern reines vanilla javascript. meistens reicht mir das völlig, ich bin noch über keine zeile gestolpert die dringend jQuery gebraucht hätte.

 

[floq0r]

jQuery "braucht" seit ES5 (?) eh keiner mehr, ich hab es halt noch in meinem muscle-memory, meine Finger schreiben die Funktionen schon automatisch Hinsichtlich Performance gibt es laut Benchmarks kaum Unterschiede und manche Dinge sind etwas weniger Schreib-Arbeit.
Gerade für Animationen abseits von easing-type linear ist aber gerade jQueryUI eine gute Sache: https://api.jqueryui.com/easings/

 

[Kokujou]

nice nice! das behalt ich mal im hinterkopf^^ ich versuch aber meistens nix externes zu verwenden, soweit möglich. nur litHtml hab ich mir halt gezogen, damit ich meinen code sauber halten kann.

wenn ich jetzt noch ne art error-checking für meine ganze Projektmappe hätte wäre das echt geil... denn indem man jsCheck in der jsConfig aktiviert kannst du auch mit javascript sauberen typed code schreiben, sogar stronlgy typed code. das erleichtert das programmieren unfassbar. und das ganze ohne beschränkungen und build prozess von typescript.

 

[sandreas]

Schau mal hier, geht auch mit CSS only
https://3dtransforms.desandro.com/carousel

 

[Kokujou]

das ist natürlich auch interessan.t... ein 3D rotationseffekt.
jetzt bin ich tatsächlich in versuchung...
was meint ihr denn dazu, welcher effekt sieht cooler aus? der aus dem 3D Karusel?
oder der hier:

 

[DaysShadow]

Egal was, hauptsache die Flaggen sind ordentlich gleichmäßig angeordnet. Das da tut weh

Spaß beiseite, ich denke das lässt sich besser mit Animation beurteilen. Vielleicht ist es auch generell viel zu viel Spielerei und gar nicht praktisch? Weiß ja nicht worum es genau geht, aber für eine Sprachwahl brauche ich keine 3D Animation die mich warten lässt bis die Animation fertig ist z.B., aber das kommt auch sicher auf den Anwender an

 

[Kokujou]

naja meine Gedanken waren wie folgt: Ich baue ja eine Klassifizierung von Musikstücken aus meiner Sammlung. Und Musik kann bekanntlich sehr viele Sprachen haben. Ein Dropdown wäre in meiner UI komplett fehl am platz. und wenn ich onclick die nächste sprache wähle, bei 10 oder 20 sprachen klickt man sich da verrückt, daurm brauch ich irgendwas wo man zumindest vor und zurück kann und vielleicht auch 3-4 sprachen auf einmal im blickfeld hat.

daher kam ich recht schnell auf die Idee dass ich was anderes brauche und das mit der Rotation wäre mir da zuerst eingefallen... das Karussel sieht aber auch nicht schlecht aus. ist quasi dasselbe nur auf Z-Ebene. bei mir rotiert das Rad eben auf x-y-ebene um den mittelpunkt.

vor allem versuche ich alles möglichst intuitiv ohne erklärenden Text zu halten. ich kann ja mal ein bild schicken. Das blöde ist halt: ich bin kein Designer, wie man vermutlich auch sieht^^

 

[DaysShadow]

Ich bin auch absolut kein Designer, insofern mach dir da mal keine Sorgen

Wie wäre es denn stattdessen mit einer Matrix in der die Flaggen zu sehen sind, am besten irgendwie gruppiert (nach Kontinent, generelle Häufigkeit oder ähnlich) und der Menge geschuldet in einer kleineren Vorauswahl. Je nach Menge die du anzeigen willst halte ich diese Karusellgeschichte, besonders bei häufigem Auswählen, halt eher für nervig, aber das ist nur meine bescheidene Meinung.
So wäre es Klick, Matrix sichtbar, Flagge auswählen, weiter gehts. Im Endeffekt auch nichts anderes als das was ein Dropdown macht, nur größer

 

[Kokujou]

stimmt schon... darum hab ich das aktuelle layout ja gewählt, wenn man das zeug nämlich in x-y-ebene rotiert kann man bestimmt 10-15 sprachen auf einmal anzeigen. und der user kann draufklicken wo er will, quasi wie ein dropdown, nur halt zum layout passend. denn ich persönlich finde dropdowns würdne bei mir recht fehlplatziert aussehen... ich wollt halt n bisl fancyness reinhauen XD

 

[DaysShadow]

ich wollt halt n bisl fancyness reinhauen XD

War kein Vorwurf Ich kenne das nur zu gut, mal eben Dinge umzusetzen, einfach weil es interessant ist

Gib weiterhin Updates, find's interessant.

 

[Kokujou]

Kann ich machen Ich würde aber glaub bei der x-y-Rotation bleiben, eben weil, wie du gesagt hast, es für den user schöner wäre möglichst viele Sprachen angezeigt zu bekommen und die Z-Achse bei dem Karusel würde das halt nicht bringen, da würde die hälfte geclipt werden.