Nutzen von Hosted Libraries in HTML5-Bannern bei der Auslieferung über Adserver

Heute geht es um den Nutzen von „hosted libraries“, also die extern gehostete Ressourcen (wie das auf den letzten Artikel verwendete TweenMax) in Bannern. In der Regel sind wir bei de Produktion von Standard-Banner ziemlich eingeschränkt was das „Gewicht“ des Banners angeht (also die Datenmenge, typischerweise gemessen in KBs). Jeder Werbebanner wird viele tausende Male gezeigt, und all die Daten müssen natürlich jedes Mal übertragen werden. Kein Wunder das wir echt froh sind über jedes bisschen KB was wir bei der Produktion einsparen können!
 
Was ist also zu tun, damit wir einige KBs einsparen können und wir die Java-Skript Bibliotheken oder Frameworks wie TweenMax nicht „physisch“ mit den Banner ausliefern müssen bzw. nicht mit auf dem Adserver/Vermarkter hochladen müssen? Zum Glück werden diese Skripte von verschiedenen CDN’s (content delivery networks) vorgehalten, wo wir sie dann nachladen können:
 

HTML im Head-Bereich:

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"> 
</script>

 
In der Regel findet man alle möglichen aktuellen Skripte, wie jQuery, CreateJS, AdobeEdge etc auf den CDN. Das hat auch den Vorteil das ein Browser, der bereites das jeweilige Skript von der CDN geladen hat, dieses im Cache behält und dann nicht bei jedem Aufruf neu laden muß.
 
Hier einige für die HTML5-Banner-Entwicklung immer wieder relevanten Skripte:

 
Wichtig dabei ist gleich immer auf eine Secure-Verbindung zu achten, also der Skript sollte aus einer https:// Quelle geladen werden, sonst könnte es Beschwerden von den Vermarktern geben – diese wollen ja keinen unsicheren Content auf ihren Seiten haben.
 
Ich hoffe mit diesen Beitrag geholfen zu haben! Fragen und Kritik könnt ihr gerne wie immer in den Kommentaren hinterlassen, ich freue mich über Feedback 🙂

Drehende Autoreifen HTML5 Banner Animation mit 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) 🙂
 
Autofelge von vorneFreigestelltes Autobild

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:
 
Richtige Winkel für die Felgen Falsche winkel für die Felgen

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 geholfen zu haben! Fragen und Kritik könnt ihr gerne in den Kommentaren hinterlassen, ich freue mich 🙂