mrperformer
New member
Hallo zusammen!
Für eine Website soll ein kleines grafisches Gimmick eingesetzt werden. Ein Bild erscheint durch "Einpixelung" und wabert weiter.
Ca. 200 x 200 px groß, stellt es Euch vor wie ein Bienenwabenmuster mit etwa 40-60 Waben. Wobei die Waben nicht sechseckig, sondern dreieckig sind. Unter dem Muster liegt ein JPG, die Dreiecke verdecken das Bild.
Beim Seitenaufbau werden von den Waben etwa 3/4 zufällig ausgefaded, so dass das Bild erscheint. Welche Wabendreicke ausfaden, in welcher Reihenfolge und in welcher Geschwindigkeit, soll zufällig passieren.
Nach der Startanimation soll immer wieder ein Dreieck ein- und ein anderes ausgeblendet werden, so dass der Bildbereich immer lebt. Eventuell werden die Dreiecke in bis zu 3 verschiedenen Farben eingesetzt, so dass diese Zuordnung auch noch über das Script gelöst werden muss.
Nun zu meiner Frage: Über welchen Ansatz würdet Ihr diese Aufgabenstellung lösen, um Ladezeit und Seitenperformance möglichst gering zu halten? Ich könnte mir verschiedene Ansätze vorstellen:
1. Jedes Dreieck als PNG, Opacity-Wert direkt über JS setzen (wahrscheinlich nicht so dolle).
2. Jedem Dreieck ein Klasse zuweisen, die jeweils für eine Zeit/Transparenz steht. Animation über CSS-Transition.
3. Die Dreiecke nicht als PNG, sondern über JS generieren. Animation über CSS-Transition.
4. ???
Was würdet Ihr empfehlen?
Für eine Website soll ein kleines grafisches Gimmick eingesetzt werden. Ein Bild erscheint durch "Einpixelung" und wabert weiter.
Ca. 200 x 200 px groß, stellt es Euch vor wie ein Bienenwabenmuster mit etwa 40-60 Waben. Wobei die Waben nicht sechseckig, sondern dreieckig sind. Unter dem Muster liegt ein JPG, die Dreiecke verdecken das Bild.
Beim Seitenaufbau werden von den Waben etwa 3/4 zufällig ausgefaded, so dass das Bild erscheint. Welche Wabendreicke ausfaden, in welcher Reihenfolge und in welcher Geschwindigkeit, soll zufällig passieren.
Nach der Startanimation soll immer wieder ein Dreieck ein- und ein anderes ausgeblendet werden, so dass der Bildbereich immer lebt. Eventuell werden die Dreiecke in bis zu 3 verschiedenen Farben eingesetzt, so dass diese Zuordnung auch noch über das Script gelöst werden muss.
Nun zu meiner Frage: Über welchen Ansatz würdet Ihr diese Aufgabenstellung lösen, um Ladezeit und Seitenperformance möglichst gering zu halten? Ich könnte mir verschiedene Ansätze vorstellen:
1. Jedes Dreieck als PNG, Opacity-Wert direkt über JS setzen (wahrscheinlich nicht so dolle).
2. Jedem Dreieck ein Klasse zuweisen, die jeweils für eine Zeit/Transparenz steht. Animation über CSS-Transition.
3. Die Dreiecke nicht als PNG, sondern über JS generieren. Animation über CSS-Transition.
4. ???
Was würdet Ihr empfehlen?
