[werresal]

Hallole !

Ich werkel seit einigen Tagen an einem script der eine einfache Billard kugel zum rotieren bringt, sei es automatisch oder bei Mouse-Over. (->BillardBar)
Soweit ist das ja kein wirkliches Problem, es gibt auch genug Code-schnipsel da draussen.
Allerdings gibt es hierbei ein Designproblem, wenn ich die Kugel mittels CSS erstelle, wirkt diese zwar relativ echt aber der Lichteffekt der den Kreis überhaupt zur Kugel macht dreht sich dann mit. Das ist natürlich nicht wirklich real.
Kann man das trennen, sodass die Kugel zum kreis wird und erst durch das Overlay zur Kugel damit man die Kugel drehen kann während der gradient feststeht ?

ODER:

Könnte man ein Bild einer schwarzen Kugel nehmen, ohne gradient, diese drehen und per overlay z-index den Gradient als transparentes png drüber projezieren sodass beim drehen der Kugel nur die Kugel dreht aber nicht der gradient ?

ODER:

Wäre es sinnvoller wenn ich das ganze z.b. als animiertes Gif rendere und selbige einbaue ? Ich denke mit Blender oder Cinema 4d oder Ähnlichen Tools kann man das korrekt rendern und per css als animiertes Gif einbinden.


Ich hoffe es ist verständlich worauf ich hinauswill. Mir qualmt schon der Kopf vom stundenlangen rumprobieren.

Danke und Grüße,

Patrick

[cloned]

Die Frage dabei ist: Wieso soll das per CSS animiert werden? Also, was ist hier der Vorteil zu einer bereits fertig erstellten Animation? Ein gif (oder vllt besser eine video-Datei) würde hier doch eine realistische Lösung realisieren? Bei den CSS-Lösungen hast du die von dir bereits angesprochenen Probleme. Sicher, du kannst für jeden keyframe ein eigenes Aussehen bestimmen aber das würde doch mehr Arbeit (und mehr Code) brauchen als es fertig einzubinden.

[werresal]

Das stimmt, ich dachte allerdings das eine Gif-Animation einer 80x80 px großen Billardkugel sicherlich mehr Bandbreite braucht (>1mb) als eine CSS Animation die ja nur aus Code besteht. (Die Seite hat sowieso schon viele Bilder..)
Zudem sehen CSS Animationen an den Kanten besser aus als rotierende PNGs, da gibt es immer Pixelprobleme.

Kann man animierte Gifs eigentlich per :hover triggern ?

Eine Videodatei..hmm.. also die Kugel sollte auf einem bestehenden Cover-Bild der Homepage laufen - an der korrekten Stelle und die dort vorhandene Billard-kugel überblenden. Kann man das üerhaupt realisieren ? Transparente Videos ?

Mit flash war das früher alles viel einfacher. Finde ich.

Hier, was ich bisher geschafft habe:

http://sportsbar-karlsruhe.de/test/

Danke und Grüße