HTML5 Werbebanner
+ Web Development
Wenn du einige Banner nicht sehen kannst, dann deaktiviere bitte deinen Adblocker auf dieser Seite!
Zur Zeit nicht verfügbar!
Animierte HTML5 Banner
für jede Kampagne
In allen Formaten und allen Dateigrößen.
Gerne bin ich dir auch bei der Erstellung deiner DCO Kampagne behilflich.
Individuell programmierte Funktionen aller Art für die Banner.
Animation über CSS, Adobe Animate und GSAP.
Gerne bin ich dir auch bei der Erstellung deiner DCO Kampagne behilflich.
Individuell programmierte Funktionen aller Art für die Banner.
Animation über CSS, Adobe Animate und GSAP.
noch mehr
HTML5 Banner
Jeder der Banner gewichtet unter 300kb.
Manche Banner sind sogar mit 120kb Maximalgröße konzipiert.
Manche Banner sind sogar mit 120kb Maximalgröße konzipiert.
HTML5 Banner mit Integrierter
JavaScript Funktionalität
Die ist nur ein Beispiel einer integrierten Funktionalität.
Ich habe den Banner so umgeschrieben, dass der Timer mit einem Klick auf den Banner auf 3 Sekunden gesetzt wird.
Reset
Einschränkungen beim Integrieren von Funktionalitäten sind hier nur die Größe des Banners und natürlich der Aufwand.
3D Integration in HTML5 Werbemittel oder direkt auf der Webseite
Über die Three.js-Library habe ich 3D in diesen Banner integriert.
Die Perspektive kann mit der Maus angepasst werden.
Die Assets wurden dabei in Blender erstellt. Ich musste die Texturen baken, da die Three.js Engine keine komplizierten Shader unterstützt.
Der Banner hat ein Initial Weight von 213kb. Dieser kann durch verwenden von PNGs statt dem Integrieren von Schriftarten nochmal um 160kb reduziert werden. Die 3D Objekte und Skripte werden erst geladen, wenn der Cursor über das Werbemittel hovert, also User Initiated. Momentan werden hier 2,9MB nachgeladen. Dies ist allerdings stark abhängig von den verwendeten Texturauflösungungen und der Komplexität der Szene.
Die Perspektive kann mit der Maus angepasst werden.
Die Assets wurden dabei in Blender erstellt. Ich musste die Texturen baken, da die Three.js Engine keine komplizierten Shader unterstützt.
Der Banner hat ein Initial Weight von 213kb. Dieser kann durch verwenden von PNGs statt dem Integrieren von Schriftarten nochmal um 160kb reduziert werden. Die 3D Objekte und Skripte werden erst geladen, wenn der Cursor über das Werbemittel hovert, also User Initiated. Momentan werden hier 2,9MB nachgeladen. Dies ist allerdings stark abhängig von den verwendeten Texturauflösungungen und der Komplexität der Szene.
Reset
Animierte dynamische
HTML5 Banner ...
Bitte nutze die Maus um die Größe des Banners zu verändern.
Dieser Banner hat 3 verschiedene Größen, gesteuert über 2 Breakpoints, welche farblich im Feld markiert sind.
Ändert sich die Größe des iFrames auf der eingebetteten Seite, so ändert sich auch die Größe des Banners.
Ändert sich die Größe des iFrames auf der eingebetteten Seite, so ändert sich auch die Größe des Banners.
Die Größe des Banners überschreitet dabei keine 300kB. Dies wird erreicht, indem für alle Größen die gleichen Assets zur Animation verwendet wurden.
Die Animationen selbst wurden über Adobe Animate umgesetzt und die verschiedenen Animationen werden per JavaScript entsprechend geladen.
Die Animationen selbst wurden über Adobe Animate umgesetzt und die verschiedenen Animationen werden per JavaScript entsprechend geladen.
Bitte nutze die Maus um die Größe des Banners zu verändern.
Komplette Responsivität
Bitte nutze die Maus um die Größe des Banners zu verändern.
Ebenso ist eine komplette dynamische Responsivität durch Aufteilung der Animationen in einzelne Embed Elemente möglich.
Hierfür muss darauf geachtet werden, dass der Canvas der einzelnen Animationen transparent ist.
Hierfür muss darauf geachtet werden, dass der Canvas der einzelnen Animationen transparent ist.
Weiteres Beispiel:
Dynamischer Fireplace
Diese Ad kommt komplett ohne JavaScript aus und bietet maximale Ausreizung der zur Verfügung stehenden Werbefläche.
Die Gesamtgröße des kompletten Banners kann auf ca 500kB Beschränkt werden.
Die Gesamtgröße des kompletten Banners kann auf ca 500kB Beschränkt werden.
Ebenso möglich wären hier auch einfachere CSS-Animationen.
Bitte nutze die pinken Kästchen um die Größe des Banners an 3 Stellen zu verändern.
Folge diesem Link zur Vorschau einer dynamische Fireplace Ad:
Dynamische Fireplace Ad
App Development
Waagi ist eine hybride Cross-Plattform-App für Android und Web.
Ich habe Sie mit Vue.js inklusive VueX erstellt.
Ich habe Sie mit Vue.js inklusive VueX erstellt.
Link zur Web-App:
WaagiEs handelt sich um einen Gewichts-Tracker. Die Daten werden manuell eingegeben und können über eine Sync-Funktion via Firebase mit dem Back-End abgeglichen werden um so die Cross-Plattform-Funktionalität zu gewährleisten.
Als Basis des Graphen diente Chart.js bzw vue-chart.js.
Ab dem 4. Eintrag habe ich eine Zoom und Slide Funktion in den Graphen integriert, so dass die Anzahl und der Bereich der Daten stufenlos ausgewählt werden kann.
Ab dem 4. Eintrag habe ich eine Zoom und Slide Funktion in den Graphen integriert, so dass die Anzahl und der Bereich der Daten stufenlos ausgewählt werden kann.
Über node.js und Puppeteer habe ich über den Headless Chrome via WebScraping eine Database für die Nährwerte zusammengetragen.
Zur Portierung auf Android habe ich Capacitor genutzt.
Zur Generierung der ersten User habe ich eine Google Ads Kampagne mit diversen Werbemitteln für einen Monat getestet. Unter anderem habe ich auch HTML5 Werbemittel erstellt, welche neben den YouTube Preroll Ads die beste Performance erbracht haben.
Da ich keinerlei Monetarisierungsfunktionalitäten integriert habe und genug Erkenntnisse aus dem Projekt für mich mitnehmen konnte, habe ich die Marketingmaßnahmen nicht weitergeführt.
Da ich keinerlei Monetarisierungsfunktionalitäten integriert habe und genug Erkenntnisse aus dem Projekt für mich mitnehmen konnte, habe ich die Marketingmaßnahmen nicht weitergeführt.
Weitere Beiträge auf dem PC
Was darf ich
für dich tun?
für dich tun?
Portfolio | Web Development | HTML5 Banner und HTML5 Werbebanner, DCO, App Entwicklung & App Development, Lottie Animation | Selbstständiger Freiberufler und Freelancer | Aus Solingen und rund um Düsseldorf, Köln, Langenfeld, Hilden, Wuppertal, Solingen, Haan und Umgebung | Bundesweit Remote