Werbeunterbrechung statt Bannerwerbung

Webdesign

Pop-ups gehören endgültig auf die Out-Liste der Werbemechanismen. Der Trend geht in Richtung geschickt eingeblendete Werbefläche, die zum Beispiel eine Webseite unterteilen.

  1. Webdesign
  2. Teil 2: Webdesign
Werbeunterbrechung statt Bannerwerbung

© Archiv

Werbeunterbrechung statt Bannerwerbung

Werbeunterbrechung statt Bannerwerbung

Pop-ups gehören endgültig auf die Out-Liste der Werbemechanismen. Der Trend geht in Richtung geschickt eingeblendete Werbefläche, die zum Beispiel eine Webseite unterteilen.

Werbeunterbrechung statt Bannerwerbung

© Archiv

Sie kennen die Technik sicher von vielen Zeitungsportalen. Die Webseite baut sich auf und plötzlich taucht eine Animation direkt auf der Seite auf, fliegt nach rechts, verlässt den Contentbereich und kommt neben dem eigentlichen Inhalt zur Ruhe, um die Werbebotschaft zu präsentieren. Oft ist auch der vertikale Ablauf der Webseite durch einen schmalen Kasten unterbrochen, der rechts neben dem Inhalt in einen vertikalen Kasten übergeht. Der Anschein entsteht, als läge ein großes Bild teilweise durch die Webseite verdeckt hinter dem Content.

Fünf DIV-Container

Diese Art der Werbeunterbrechung kann mit der geschickten Positionierung von DIV-Containern erreicht werden. Im Bild sehen Sie das Ergebnis. Die Webseite ist scheinbar in der Mitte durchgerissen, der untere Teil nach unten verschoben. Im Zwischenraum und rechts des Inhaltes erkennen Sie die komplette Anzeige. Um Spannung aufkommen zu lassen, wird die Anzeige nicht gleich auf dem Bildschirm präsentiert, vielmehr läuft sie nach dem Ladevorgang langsam von links in die Webseite hinein bis sie ihre endgültige Position erreicht hat. Die eigentliche Werbebotschaft taucht erst auf, wenn die Anzeige breite wird als die Webseite selbst ist.

Für dieses Beispiel benötigen Sie insgesamt fünf DIV-Container, die wie ein Puzzle im Browser zusammengesetzt sind. Der erste Container (ID=contentoben) enthält die Inhalte, die oberhalb der Werbung gezeigt werden sollen. Er ist 630 x 250 Pixel groß und kann mit beliebigem HTML-Code gefüllt werden. Dasselbe gilt für den Container, der die Webseiteninhalte unterhalb der Werbung beinhaltet. Er ist ebenfalls 630 Pixel breit, eine Höhe wird ihm nicht zugewiesen, da offen gehalten werden soll, wie viel Inhalt hier gezeigt werden soll. Um Raum für die Werbeunterbrechung zu garantieren, ist die Höhe des zweiten DIV-Containers per CSS-Eigenschaft 250 Pixel unterhalb der unteren Kante des oberen Inhalts-DIVs gesetzt.

Die Seite wird durchgerissen

Der Effekt der durchgerissenen Seite wird mit zwei weiteren DIVs realisiert. Sie sind ebenfalls 630 Pixel breit, aber nur 20 Pixel hoch. Ihr Inhalt ist ein transparentes GIF. Das ist in der Bildbearbeitung schnell erzeugt. Legen Sie dazu einfach ein neues Bild mit den Maßen 630x20 Pixel an. Mit der Freihandmarkierung zeichnen Sie eine zerhackelte Linie im Innenraum des Bildes und schließen die Markierung an den Seiten des Bildes ab. Füllen Sie die Markierung mit derselben Farbe, die auch der Hintergrund der Inhalt-DIVs besitzt. Die restliche Fläche füllen Sie mit einer beliebigen anderen Farbe. Sie können nun das Bild in 256 Farben konvertieren und als GIF-Bild abspeichern. Achten Sie darauf, dass Sie die beliebig gewählte Farbe vor dem Speichern auf transparent setzen.

Werbeunterbrechung statt Bannerwerbung

© Archiv

Werbung hinter einer zerrissenen Seite: Mit Divs und CCS kein Problem.

Das so gesicherte Bild wird nun vertikal gespiegelt und in gleicher Weise unter einem anderen Namen gesichert. Sie haben nun zwei GIF-Grafiken, die den gezeichneten Abriss einmal im oberen, einmal im unteren Bereich des Bildes zeigen.

Die GIF-Bilder landen als Hintergrundgrafiken in den DIV-Containern drei und vier. Diese sind über CSS so präzise platziert, dass sie exakt unterhalb des oberen Inhalt-DIVs und oberhalb des unteren Inhalt-DIVs erscheinen. Die relativ schmale Höhe von 20 Pixeln ist absichtlich so klein gehalten. In diesen DIVs können keine Inhalte der Webseite eingeblendet werden. Wären die DIVs höher, so entstünde der übertriebene Eindruck einer großen Freifläche auf der Webseite.

"Einfliegen" der Werbung

Der fünfte DIV-Container ist für die Anzeige zuständig. Er ist 800 Pixel breit und damit 170 Pixel breiter als der Contentbereich. Dieser Überhang erscheint rechts neben dem Content und kann die Werbebotschaft enthalten. Die Links-Position dieses DIV-Containers wird zunächst auf -800px gesetzt. Damit ist die komplette Anzeige beim Start der Seite nicht sichtbar, der Container klebt quasi links vom Browserfenster.

Über die CSS-Eigenschaft "z-index : 0;" positionieren Sie diesen fünften Container hinter die anderen vier, die jeweils mit "z-index:1;" eine Schicht nach oben gelegt werden.

Das Einfliegen der Anzeige geschieht über ein kleines JavaScript. Im Body-Tag wird per On-Load-Event die Funktion "start()" aufgerufen. Diese Funktion ruft eine weitere Funktion namens "verschieben()" per Intervall auf. Die Intervall- Abstände sind mit einer Hundertstelsekunde sehr kurz gewählt, da die Anzeige Pixel für Pixel in die Webseite geschoben werden soll. Das ergibt eine sanfte Animation.

Die aktuelle linke Position des DIV-Containers speichert das Skript in der Variablen "links". Diese ist anfangs auf -800 gesetzt, entspricht also der Position, die über die CSS-Klasse definiert wurde. Bei jedem Durchlauf der Funktion "verschieben()" erhöht sich "links" um 1. Sobald "links" den Wert 0 erreicht hat, ist die Anzeige vollständig auf der Webseite zu sehen. In diesem Fall wird das Intervall gestoppt, damit die Anzeige nicht rechts aus dem Bild verschwindet.

Mehr zum Thema

Youtube Sperre umgehen GEMA
Videos freischalten

So umgehen Sie die GEMA-Sperre bei Youtube. Was Sie dazu brauchen, und wie es am einfachsten geht.
Neue Fritzboxen unterstützen den AC-Standard.
WLAN-Geschwindigkeit verdoppeln

Mehr WLAN-Geschwindigkeit: Mit dem WLAN-Standard 802.11ac und den richtigen Geräten und Einstellungen verdoppeln Sie den Datendurchsatz.
Netflix auf dem TV
Programm in der Übersicht

Welche Filme und Serien gibt es bei Netflix eigentlich zu sehen? Was ist neu im Streaming-Angebot? Diese Antworten helfen weiter.
Netflix
Streaming

Preise, kompatible Geräte, Datenrate, Serien- und Filmangebot von Netflix: Wir beantworten die wichtigsten Fragen rund um den Streaming-Dienst.
E.T. – Der Außerirdische
Vorschau auf Film- und Serien-Highlights

Amazon Prime Instant Video lockt im Dezember 2016 mit Film-Highlights wie "E.T.", "Fast & Furious 7" und der Serie "Ku’damm 56​".