• Abb. 1: Werbe-Layer noch im Off-Canvas

  • Abb. 2: Werbe-Layer fährt während des Scroll-Vorgangs ein.

  • Abb. 3: Werbe-Layer fährt während des Scroll-Vorgangs ein.

  • Abb. 4: Werbe-Layer ist nach Scroll-Vorgang eingeblendet.

LWL-Werbe-Layer

Regelung

Allgemein:

  • Der Werbe-Layer ist in der Breite variabel und in der Höhe fest. Er ist geeignet für die responsive Werbung mit HTML 5/CSS3.
  • Die maximale Breite beträgt 1260 Pixel.
  • Die maximale Gesamthöhe (Kopfzeile und Content-Bereich) beträgt 720 Pixel.
  • Die Größe des Layers richtet sich nach der Größe der dargestellten Werbung.
  • Nach dem Einscrollen steht der Layer zentriert im Content-Bereich mit Abstand nach oben und unten (von jeweils 100 Pixeln in der Desktop-Ansicht).

Aufbau des Layers:

  • Die Kopfzeile besteht aus der Kennzeichnung „Anzeige“ und dem X-Button zum Schließen des Layers. Die Höhe beträgt 40 Pixel.
  • Im Content-Bereich wird die Werbe-Anzeige gespielt. Die maximale Höhe beträgt 680 Pixel.
  • Standardhintergrund: #ffffff (weiß).
  • Hintergrund „Kopfzeile“: #00335f (dunkelblau).
  • Typografie „Kopfzeile“: Open Sans Normal 400.
  • Schriftgröße: 16 pt.
  • Schriftfarbe: #ffffff (weiß).
  • Layer-Schatten CSS: box-shadow: 0 Pixel, 0 Pixel, 20 Pixel, 0 Pixel, rgba (0, 0, 0, 0.2).

Verhalten des Layers:

  • Der Layer ist beim Aufruf der entsprechenden Seite im Off-Canvas.
  • Scrollt man auf der Seite zum Ende eines Textes oder Abschnitts, schiebt sich der Layer mit der Scrollbewegung von links in den Sichtbereich.
  • Der Layer scrollt weiter über den Content.
  • Der Layer positioniert sich vertikal zentriert über den Text beziehungsweise im Content.
  • Mit einem Click auf den X-Button kann der Layer wieder geschlossen werden. Wahlweise kann man einfach weiter scrollen.

Responsives Verhalten:

  • Ist die Breite des Browser-Fensters beziehungsweise des Viewports geringer als die maximale Breite des Werbe-Layers, so wird er mit einer Breite von 100 Prozent und mit einem Randabstand von 30 Pixeln angezeigt.
  • Auf mobilen Endgeräten unter der Größe eines Tablets beträgt der Abstand zum Rand 15 Pixel - unabhängig von der Ansicht (Portrait oder Landscape).
  • Die Höhe des Layers passt sich dabei an den Inhalt (der Werbung) an, damit diese möglichst optimal dargestellt werden kann.