Webdesign - Menü mit Garagentore

  1. Zum Inhalt springen

webdesign
klamonfra
Klaus Franz


Wie realisiert man Garagentore die sich automatisch öffnen?

29Dez2014

Menü mit Garagentore.


Der Effekt mit einem "öffnenden Garagentor" hatte ich in der Fotogalerie vor ein paar Jahren mit JavaScript (objektorientierte Programmiersprache) realisiert, aber durch die CSS3 (Cascading Style Sheet)-Transitionen geht das nun auch viel einfacher. Wie ich die Technik der auffahrenden Garagentore realisiert habe möchte ich in diesem Artikel kurz aufzeigen.
Im Grunde genommen ist es die gleiche Vorgehensweise wie beim "Überblenden von zwei Bilder". Da ich unter dem Garagentor auch einen Text darstellen möchte, habe ich das Ganze wieder mit einem "div-Container" realisiert. Der Aufbau des HTML5 (HyperText Markup Language)-Gerüsts schaut wie folgt aus.

<div class="tuer" title="Hier geht es zu den Blumenbildern">
    <a href="/fotogalerie-Blumen">
        <img src="/galerien/slides/bg01.jpg" width="200" height="100">
        <img src="/galerien/slides/Blumen.jpg" width="200" height="100">
        <p>26.10.2008<br>Blumen aus Irland
        </p>
    </a>
</div>

Die beiden Bilder, das Hintergrundbild und das Bild des Garagentores, liegen hintereinander und durch die absolute Platzierung wird das zweite Bild, das Bild des Garagentores, angezeigt. Damit dieses Bild nun aber nicht nur nach oben verschoben wird, muss ich dem Container die Eigenschaft "overflow: hidden" geben.
Bei den Bildern wird der absoluten Platzierung von oben der Wert "0" zugeteilt. Das zweite Bild spreche ich wieder mit der Pseudo-Klasse "nth-of-type (2)" an und verschiebe es beim Überfahren mit dem Mauszeiger um 85 Pixel nach oben, aus dem sichtbaren Bereich heraus.
Dem Textfeld wird dann noch als Hintergrund der Rahmen der Garage zugeteilt und entsprechend ausgerichtet.

.tuer {
    position: relative;
    height: 170px;
    width: 200px;
    margin: 1em auto;
    overflow: hidden;
    box-shadow: 0 0 5px -2px rgba(0, 0, 0, .7), 0 0 4px rgba(0, 0, 0, .7);
    background: #eee;
    transition: 2s;
}

.tuer img {
    position: absolute;
    top: 0;
    transition: 2s;
}

.tuer:hover img:nth-of-type(2) {
    top: -85px;
}

.tuer:hover {
    box-shadow: none;
}

.tuer p {
    position: absolute;
    line-height: 1.3em;
    text-align: center;
    height: 65px;
    width: 178px;
    bottom: 0;
    padding: 103px 10px 0;
    border: 1px solid #575757;
    background: url(/galerien/slides/fenster.png) no-repeat;
}

Das war schon alles. Als Beispiel sieht man unten die Garage in Funktion und auf der Seite Übersicht der Fotogalerien ist dieser Effekt mehrfach eingebunden.

Wenn man nun Java ausschaltet funktioniert der Effekt trotzdem, auch mit dem Internet Explorer 10 und 11! Gerade das ist der Vorteil und alle modernen Browser unterstützen die CSS3 (Cascading Style Sheet)-Transitionen. Außerdem wird die Ladezeit verkürzt da ja kein Javascript für diesen Effekt benötigt wird.

Ihre Internet-Seiten gefallen mir sehr gut, besonders die Fotogalerie mit den sich Öffnenden Toren.
Ein Test mit Ihrem Codeschnipsel zeigt, dass der Effekt wunderbar funktioniert (ohne Javascript).
Mit dem IE9 (für Vista gibt es offenbar keine neuere sichere Version) gibt es zwar Einschränkungen, aber die Türchen öffnen.
Ich bin sehr froh darüber und Ihnen sehr dankbar. Die Seite werde ich demnächst entsprechend umbauen.
Ein frohes und erfolgreiches Neues Jahr wünscht Ihnen
Winfried Halank

Zum Seitenanfang springen Λ