Wer erstellt mir einen neuen Header?

Jana · 02.03.2023

draupnir schrieb:
Unter "3D" kann man sich vieles vorstellen. Die einfachste Lösung ist das Drehen um 360°.

Hier mal eine Quick-n-Dirty-Lösung:

Darf ich fragen, mit welchem Programm du das so schnell und glänzend umgesetzt hast?

draupnir · 02.03.2023

Hallo Jana,
mit mehreren Programmen:
1. png in Adobe Illustrator zu Vektorgrafik, als .ai8 gespeichert.
2. .ai8 in CINEMA 4D R13 um 360° rotiert, 30 Einzelbilder als .png transparent berechnen lassen.
3. Einzelbilder mit Photoshop bzw. mit Animatrice (mac app) in aninmiertes gif und animiertes png verwandelt
Allerdings habe ich am Ende auf der Website es dann mit CSS anders gelöst:
18 Einzelbilder zu einem Bild zusammengesetzt und dann per CSS dieses Bild so verschoben, dass es wie eine Animation aussieht.

Hier der entscheidene CSS-Code


#top-animation {
    width: 180px; height: 180px; overflow: hidden;
    background: url("bilder/pink_camel_3240x180px.png") left center; 
    background-size: cover; 
    animation-name: play;
    animation: play 1.75s steps(18); 
    animation-iteration-count: 3;
/*    display: inline-block; */
    margin: 0px; padding:0px; margin-left: 8px;
    background-repeat: no-repeat;
}

Kohlrausch · 05.03.2023

Danke, tausend dank, doch sind das für mich alles irgendwie "böhmische Dörfer".