Tutorial - Dreidimensionaler, rollender Werbebanner

  1. Zum Inhalt springen

webdesign
klamonfra
Klaus Franz


Wie erstellt man einen dreidimensionalen, rollenden Werbebanner?

27Feb2015

Ein dreidimensionaler, rotierender Werbebanner für eine ausgefallene Werbung.


Es gibt viele Möglichkeiten eine Produktinformation wirkungsvoll zu zeigen. Hier erkläre ich, wie ich den Werbebanner von "Gonzalez Musica Latina" auf der Seite Musik als dreidimensionaler, rotierender oder rollender Würfel animiert habe, und das nur mit Hilfe von CSS3 (Cascading Style Sheet)-Deklarationen.
Allerdings wird das Drehen nur von Browsern mit 3D-Unterstützung angezeigt. Für den Internet Explorer in den Versionen kleiner 10 habe ich mir das Attribut ":hover" zu Nutze gemacht, um zumindest den Text der Rückseite des Banners einzublenden.

Die meisten Webseitenbetreiber benutzen verschiedene Werbebanner um Anzeigen auf Ihrer Webseite einzublenden. Damit diese Werbung auch bewusst wahrgenommen wird, empfiehlt es sich so einen Banner in der Mitte oder am Ende eines Artikels einzublenden. Aber damit man sich optisch von der Vielzahl der Werbebanner ein wenig abhebt, ist die Einblendung dieses Werbebanners mal eine Abwechslung.

Zuerst sieht man den Werbebanner, während die Information verborgen bleibt. Erst wenn man mit der Mauszeiger über den Banner fährt, dreht sich der Würfel bis die Produktinformation sichtbar wird. Ein Verweis zu einer anderen Seite kann ebenfalls eingebunden werden.

Unser Banner
Klamonfra.de Fotos und Panoramen von Monika und Klaus Franz.

Vorgehensweise bei diesem Werbebanner:

Der Aufbau ist ähnlich dem 3D-Slider nur dass sich hier der Würfel nicht von selber dreht und eigentlich auch nur zwei Seiten hat, also ein sogenannter "Pseudo-Würfel".
Bei der verwendeten Technik wird die Unterseite, also die Produktinformation, zuerst durch Drehen der X-Achse um -90 Grad und der Z-Achse um 30 Pixel versteckt. Die 30 Pixel berechnen sich aus der Hälfte der Höhe des Bildes. Beim Überfahren des Bildes mit dem Mauszeiger wird die Produktinformation dann in der X-Achse auf 0 Grad in 1 Sekunde gedreht, und damit das Bild verdeckt. Damit das Ganze noch realistischer aussieht, werden beide Seite mit einem kleinen Radius und einem Schatten versehen.

Die zugehörigen HTML5 (HyperText Markup Language)-Zeilen sehen wie folgt aus:

<div class="werben">
    <figure>
        <img src="klamonfra_banner.jpg" alt="Unser Banner"
        width="468" height="60">
        <figcaption>
            <a href="http://www.klamonfra.de/"
            title="Unsere schönsten Fotos und Panoramen">
                Klamonfra.de
            </a>
            Fotos und Panoramen von Monika und Klaus Franz.
        </figcaption>
    </figure>
</div>

Jetzt fehlt nur noch die Deklaration im CSS3 (Cascading Style Sheet).

.werben {
    display: block;
    width: 30.5em;
    height: 5em;
    margin: 2em auto;
    cursor: pointer;
    perspective: 4000px;
    transform-style: preserve-3d;
}

figure {
    height: 5em;
}

figure img {
    transform: rotateX(0deg) translateZ(30px);
    z-index: 4;
}

figcaption {
    height: 3.1em;
    width: 35em;
    text-align: left;
    padding: 10px;
    color: #eee;
    font-size: .8em;
    background: linear-gradient(#666, #111);
    transform: rotateX(-90deg) translateZ(30px);
    z-index: 2;
}

figure img,
figcaption {
    display: block;
    position: absolute;
    border-radius: 2px;
    border: 2px solid #eee;
    transition: 1s;
}

figcaption a:link {
    font: italic bold 1.5em serif;
    display: block;
    margin-bottom: .3em;
}

figure img,
figcaption,
figure:hover img,
figure:hover figcaption {
    box-shadow: 0 0 5px 1px #111;
}

figure:hover img {
    transform: rotateX(90deg) translateZ(30px);
    z-index: 2;
}

figure:hover figcaption {
    transform: rotateX(0deg) translateZ(30px);
    z-index: 4;
}

Das war's!

Die neueren Versionen des Internet Explorers, Version 10 und 11, zeigen den Würfel korrekt an und lassen diesen auch rotieren. Und für die älteren Versionen des Internet Explorers werden am Anfang einer Seite die folgenden Zeilen eingefügt:

<!--[if IE]>
    <style>

    figcaption {
        display: none;
    }

    figure:hover figcaption {
        display: block;
    }

    </style>
<![endif]-->

13Okt2016

Automatisch rollender Werbebanner


Eine Supportanfrage lautete: Ich möchte den Banner automatisch rotieren lassen, also nicht über ":hover".
Um dieses zu realisieren habe ich mir die Erkenntnisse des 3D-Slider rangezogen.

Ich füge eine zusätzliche Klasse für "figure" und "figcaption" mit dem Namen "werbung" ein. Dadurch kann ich den Werbebanner mit ":hover" und mit "automatische Rotation" auf einer Seite darstellen. Die zugehörigen HTML5 (HyperText Markup Language)-Zeilen sehen wie folgt aus:

<div class="werben">
    <figure class="werbung">
        <img src="klamonfra_banner.jpg" alt="Unser Banner"
        width="468" height="60">
        <figcaption class="werbung">
            <a href="http://www.klamonfra.de/"
            title="Unsere schönsten Fotos und Panoramen">
                Klamonfra.de
            </a>
            Fotos und Panoramen von Monika und Klaus Franz.
        </figcaption>
    </figure>
</div>

Das CSS3 (Cascading Style Sheet) wird dann nur noch durch die zusätzlichen Zeilen ergänzt.

.werbung img {
    animation: werbe1 10s infinite linear;
}

.werbung figcaption {
    animation: werbe2 10s infinite linear;
}

@keyframes werbe1 {
      0%  {transform: rotateX(0deg) translateZ(30px);z-index: 4}
     50%  {transform: rotateX(90deg) translateZ(30px);z-index: 2}
     50.1%{transform: rotateX(-90deg) translateZ(30px);z-index: 2}
    100%  {transform: rotateX(0deg) translateZ(30px);z-index: 4}
}

@keyframes werbe2 {
      0%  {transform: rotateX(-90deg) translateZ(30px);z-index: 2}
     50%  {transform: rotateX(0deg) translateZ(30px);z-index: 4}
     50.1%{transform: rotateX(0deg) translateZ(30px);z-index: 4}
    100%  {transform: rotateX(90deg) translateZ(30px);z-index: 2}
}

.werbung:hover img,
.werbung:hover figcaption {
    animation-play-state: paused;
}

Bei einem größeren Werbebanner mit viel Information ist es vielleicht notwendig die Rotation zu stoppen. Dafür ist dann die Deklaration "animation-play-state: paused" notwendig.
Das war es auch schon. Und man sieht, es ist alles kein Hexenwerk!

Unser Banner
Klamonfra.de Fotos und Panoramen von Monika und Klaus Franz.

Zum Seitenanfang springen Λ