Schlagwort: tweenmax

Die Automobil-Branche ist sicherlich eine der Branchen die am meisten in Online-Banner investieren, täglich sehe ich unzählige Banner unterschiedlicher Automarken. Jedes neue Auto-Modell eines Herstellers findet sich selbstverständlich auch im Web wieder. Es ist in der Fülle von Bannern also nicht gerade einfach ein einzigartiges und vor allem Aufmerksamkeit-Starkes Banner zu präsentieren. Dazu kommt jedes Hilfsmittel zur Güte! Hier werde ich zeigen wie man mit HTML5, Javascript, CSS und TweenMax eine schöne Animation zaubern kann die ausgezeichnet zu Fahrzeugen passt.

Ein meiner Meinung nach sehr guter visueller Trick ist das beworben Auto in das Bild reinfahren zu lassen – eine Anforderung die auch oft ohne meine Empfehlung von alleine durch meine Auftraggeber gestellt wurde. Schließlich ist fahren ja genau das was Autos tun sollen und stellt so direkt eine Verbindung zum Nutzen und zur Inspiration für den Kunden dar. Dabei reicht aber nicht „nur“ das reinfahren, sondern es sollte auch halbwegs realistisch aussehen. Dabei spielt das Drehen der Autoreifen bzw der Felgen eine wichtige Rolle (sonst würde das Auto praktisch stehend über den Boden „schweben“).

Im folgenden möchte ich beschreiben wie folgende Animation entstanden ist:

Für die Animation erstellen wir zwei <div> Elemente, ein Element das die Felge beinhaltet und dazu ein übergeordnetes Element. Es ist wichtig hier zwei <div>’s zu haben, denn wir wollen die Reifen/Felge rotieren, müssen aber den Winkel dessen noch anpassen so dass es genau richtig sitzt. Hilfreich ist auch beide Reifen in einen Container zusammen mit den Autobild zu stecken, damit man alles zusammen ins Bild reinfahren lassen kann.

Wichtig dabei ist ein sauber freigestelltes Bild des Autos zu haben und ein gutes frontales Bild von dem Reifen bzw der Felge (beim Kunden nachfragen, werden sie sicherlich parat haben) 🙂

Freigestelle Bilder von Felge und Auto – ©Pixabay

Und hier nun zum wesentlichen Teil des Ganzen; als erstes binden wir die Bilder ins HTML ein:

HTML

<div id="autoContainer">
     <div id="reifen1"> <img src="assets/felge.png" id="felge1"> </div>
     <div id="reifen2"> <img src="assets/felge.png" id="felge2"> </div> 
     <img src="assets/auto.png" id="auto">
</div>

Dann fügen wir die Reifen und Felgen ins CSS ein:

CSS

#reifen1 {
    position: absolute;
    left: 415px;
    top: 158px;
    z-index: 11;
    transform: rotateY(-33deg) skewX(-7deg);
    -webkit-transform: rotateY(-33deg) skewX(-7deg);
    -moz-transform: rotateY(-33deg) skewX(-7deg);
}

#felge1 {
    height: 45px;
    width: auto;
}

Wie man oben sehen kann, haben wir bei #reifen1 eine Verzerrung/Neigung des Elementes spezifiziert, damit es zu dem Winkel des Autos im Bild passt. Ohne diese Verzerrung würde das Ganze wie in der Abbildung unten aussehen und dabei noch „eiern“ beim rotieren:

Links richtiger Winkel, rechts falscher Winkel

Jetzt müssen wir nur die #felge1 Elemente drehen lassen. Hierfür nutze ich gerne TweenMax mit einem Code-Schnipsel dass die #felge1 endlos drehen lässt. Das zweite Schnipsel dafür sorgt dass die timeScale des tweens auf 0 gesetzt wird, so dass sich die Reifen langsam zum Ende hin abbremsen.

Javascript

function startReifen() {
    reifenTween= new TweenMax("#felge1, #felge2", 0.25, {
        rotation: '-=360_cw',
        ease: Linear.easeNone,
        repeat: -1
    });

    TweenMax.to(reifenTween, 1.0, {
        timeScale: 0,
        delay: 1.1,
        ease: Back.easeOut.config(0.6)
    });
    return reifenTween;
}

Man kann mit allen Parameter rumspielen bis man das beste Ergebnis für das individuelle Bedürfnis gefunden hat. Zum Beispiel kann man die Räder in die andere Richtung drehen lassen mit rotation ‚+=360_cw‘ oder die Länge der Animation oder des Delays ändern. Im Großen und Ganzen ist dies ein guter Ansatz für eine realistische und lebhafte Animation.

Ich hoffe mit diesen Beitrag hat es euch gefallen! 🙂