Webdesign - Hinter einem Vorhang versteckt sich ein Bild.

  1. Zum Inhalt springen

webdesign
klamonfra
Klaus Franz


linke Seite des Vorhang rechte Seite des Vorhang Deckenverkleidung Sonnenuntergang Kordel

Photo © Monika & Klaus Franz

Hinter einem Vorhang versteckt sich ein Bild

12Jul2018

Ziehen Sie an der Kordel und der Vorhang öffnet sich.


Diese Animation wird im Original mit einem JavaScript (objektorientierte Programmiersprache) und der JavaScript-Klassenbibliothek "jQuery" realisiert. Genau genommen benötige ich für den Bounce-Effekt das Plugin "easing" wenn das Seil gezogen wird. Dieses Tutorial wird aber erst durch die eingesetzten Bilder zu etwas Besonderem!

Diesen Effekt hatte ich unter "Animationen" auf unserer Bilderseite eingebunden und werde ihn hier zuerst einmal erklären, um dann aber die Idee aufzugreifen und ein Intro für eine Diashow mit CSS3 (Cascading Style Sheet)-Animation und CSS3 (Cascading Style Sheet)-Keyframe zu erstellen.


Aber zuerst einmal die Grundidee

Die JavaScript-Klassenbibliothek "jQuery" und das JavaScript (objektorientierte Programmiersprache)-Plugin "easing" werden in dem HTML5 (HyperText Markup Language)-Dokument am Anfang der Seite im Kopf eingebunden.

<script type="text/javascript" src="/js/jquery-1.3.2.js"> </script>
<script type="text/javascript" src="/js/jquery.easing.1.3.js" > </script>

Die einzelnen Grafiken werden in das HTML5 (HyperText Markup Language)-Dokument wie folgt eingebunden.

<div class="theater">
    <img class="vorhanglinks" src="/bilder/vorhang.png"
        width="489" height="518" alt="linke Seite des Vorhang">
    <img class="vorhangrechts" src="/bilder/vorhang.png"
        width="489" height="518" alt="rechte Seite des Vorhang">
    <img class="vorhangoben" src="/bilder/vorhangoben.png"
        width="820" height="88" alt="Deckenverkleidung">
    <img class="bild" src="/bilder/sonnenuntergang.jpg"
        width="820" height="496" alt="Sonnenuntergang">
    <a class="kordel" href="#theater">
        <img src="/bilder/kordel.png"
            width="79" height="200" alt="Kordel">
    </a>
</div>

Nun erkläre ich das CSS3 (Cascading Style Sheet), dass für das Aussehen dieser schönen Animation zuständig ist.

Ich verwende zwei unterschiedliche Klassen für die beiden Vorhänge (.vorhanglinks, .vorhangrechts), die auf der linken bzw. (beziehungsweise) auf der rechten Seite platziert werden. Dies wird im CSS3 (Cascading Style Sheet) mit den Attributen "left: 0, right: 0, position: absolute" definiert.
Für die Breite der beiden Vorhänge habe ich dann noch unterschiedliche Einstellungen (width: 50%, width: 51%) angegeben. Dadurch und durch einen höheren "z-index" habe ich den rechten Vorhang leicht überlappen lassen. Dies soll bei geschlossenen Vorhängen verhindern dass das Bild dahinter durchscheint.
Die Bilder der Vorhänge sind auf 100% Breite und Höhe eingestellt (width: 100%, height: 100%), so dass die Breite der Vorhangbilder beim Zusammenziehen der Vorhänge schrumpfen, genau wie im wirklichen Leben.

Mit unterschiedlichen "Z-Index-Werte" sorgen ich dafür, dass die einzelnen Bildelemente in der richtigen Reihenfolge übereinander liegen.

Der obere Vorhang und das eigentliche Hintergrundbild sind statische Bilder und werden nicht animiert.

Zum Schluß wird das Seil eingebunden. Der Z-Index-Wert muss dabei zwischen oberem und linkem Vorhang liegen (z-index: 4), so dass das Seil dazwischen herauskommt. Das Seil selber wird dann mit "top: 3px" ganz nach oben gesetzt, so dass wir den Effekt "Ziehen des Seils" erzielen können.

Das zugehörige CSS3 (Cascading Style Sheet).

.theater {
    position: absolute;
    z-index: 1;
    width: 52.5em;
    height: 31em;
    border: 5px inset #c93;
    box-shadow: 0 0 5px -2px rgba(0, 0, 0, .7), 0 0 4px rgba(0, 0, 0, .7);
}

.vorhangrechts img,
.vorhanglinks img,
.vorhangoben img {
    width: 100%;
    height: 100%;
}

.vorhanglinks,
.vorhangrechts {
    position: absolute;
    height: 33.2em;
}

.vorhanglinks {
    left: 0;
    width: 50%;
    z-index: 2;
}

.vorhangrechts {
    right: 0;
    width: 51%;
    z-index: 3;
}

.vorhangoben {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 5;
}

.bild {
    position: absolute;
    z-index: -2;
    margin: 0 auto;
}

.kordel {
    position: absolute;
    top: 3px;
    left: 5px;
    z-index: 4;
}

Jetzt animiere ich das "Auf- und Zuziehen der Vorhänge" sowie das "Ziehen des Seils" mit der JavaScript-Klassenbibliothek "jQuery". Das JavaScript (objektorientierte Programmiersprache) sieht wie folgt aus.

$(document).ready(function() {
    $vorhangauf = false;
    $(".kordel").click(function(){
        $(this).blur();
        if ($vorhangauf == false){
            $(this).stop().animate(
                {top:'25px'},
                {queue:false,duration:350,easing:'easeOutBounce'}
            );
            $(".vorhanglinks").stop().animate(
                {width:'60px'},3000
            );
            $(".vorhangrechts").stop().animate(
                {width:'60px'},3000
            );
            $vorhangauf = true;
        }else{
            $(this).stop().animate(
                {top:'3px'},
                {queue:false,duration:350,easing:'easeOutBounce'}
            );
            $(".vorhanglinks").stop().animate(
                {width:'50%'},3000
            );
            $(".vorhangrechts").stop().animate(
                {width:'51%'},3000
            );
            $vorhangauf = false;
        }
        return false;
    });
});

Wenn die Webseite fertig geladen ist, schließe ich den Vorhang mit "$vorhangauf = false". Den Wert dieser Variablen "$vorhangauf" frage ich über "if ($vorhangauf == false)" ab, um festzustellen, ob die Animation zum Öffnen oder Schließen der Vorhänge ausgeführt werden soll.

Wird nun auf die Kordel geklickt, wird die oben beschriebene Abfrage ausgeführt. Zusätzlich gebe ich "false" zurück, um sicherzustellen, dass der Link den Bediener nicht an eine andere Stelle auf der Website führt.

Ist der Vorhang geschlossen, wird die Kordel durch die Angabe "top:'25px'" mit einem Bounce-Effekt nach unten gezogen. Dieser wird durch das Plugin "easing" hervorgerufen. Gleichzeitig wird jeder Vorhang auf eine Breite von 60px zusammengezogen, was das Öffnen des Vorhangs visualisiert. Die Öffnungszeit ist auf 3000 (3 Sekunden) eingestellt.

Jetzt, wo die Vorhänge geöffnet sind, wird, wenn das Seil erneut gezogen wird, alles auf die Standardwerte zurückgesetzt.

Damit ist diese schöne Animation mit einem JavaScript (objektorientierte Programmiersprache) fertig erstellt!
Sie finden sie am Anfang dieses Artikels.


17Jul2018

Intro für eine Diashow mit CSS3 (Cascading Style Sheet)-Keyframe


Nun möchte ich diese Grundidee für ein Intro einer Diashow erweitern. Dabei verzichte ich auf JavaScript (objektorientierte Programmiersprache) und realisiere die Effekte ausschließlich mit CSS3(Cascading Style Sheet).

Die einzelnen Grafiken werden wie oben in das HTML5 (HyperText Markup Language)-Dokument eingebunden. In meinem Tutorial kommen aber nun noch ein paar Bilder und Effekte hinzu.

Ich benötige dieses Mal noch zwei zusätzliche "div-Container" für das Öffnen und Schließen des Vorhangs (.auf, .zu).

<div id="auf">
    <div id="zu">
        <div class="theater2">
            <img class="strahlen" src="/bilder/strahlen.png"
                width="500" height="500" alt="Strahlen">
            <img class="vorhangli" src="/bilder/vorhang.png"
                width="489" height="518" alt="linke Seite des Vorhang">
            <img class="vorhangre" src="/bilder/vorhang.png"
                width="489" height="518" alt="rechte Seite des Vorhang">
            <img class="seil" src="/bilder/kordel.png"
                width="79" height="200" alt="Kordel">
            <img class="vorhangoben" src="/bilder/vorhangoben.png"
                width="820" height="88" alt="Deckenverkleidung">
            <img class="bild" src="/bilder/sonnenuntergang.jpg"
                width="820" height="496" alt="Sonnenuntergang">
            <img class="zahlen" src="/bilder/Zahlen.jpg"
                width="820" height="496" alt="Zahlenhintergrund">
            <img class="drei" src="/bilder/3.png"
                width="820" height="496" alt="Drei">
            <img class="zwei" src="/bilder/2.png"
                width="820" height="496" alt="Zwei">
            <img class="eins" src="/bilder/1.png"
                width="820" height="496" alt="Eins">
            <img class="null" src="/bilder/0.png"
                width="820" height="496" alt="Null">
            <p>
                <a class="aufziehen" href="#auf"
                    title="Vorhang aufziehen"> </a>
                <a class="zuziehen" href="#zu"
                    title="Vorhang schließen"> </a>
            </p>
        </div>
    </div>
</div>

Das CSS3 (Cascading Style Sheet) ist wieder für das Aussehen und die Animation zuständig.

Im Großen und Ganzen bleiben aber die Festlegungen gleich und nur für die Animation kommen neue hinzu.
Aus dem Grund schreibe ich zuerst einmal die eben schon festgelegten Definitionen auf.

.theater2 {
    position: absolute;
    z-index: 1;
    width: 51.2em;
    height: 31em;
    left: 0;
    border: 5px inset #c93;
    box-shadow: 0 0 5px -2px rgba(0, 0, 0, .7), 0 0 4px rgba(0, 0, 0, .7);
}

.vorhangli,
.vorhangre {
    position: absolute;
    height: 33.2em;
}

.vorhangli {
    left: 0;
    width: 50%;
    z-index: 2;
}

.vorhangre {
    right: 0;
    width: 51%;
    z-index: 3;
}

.vorhangoben {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 5;
}

.bild {
    position: absolute;
    z-index: -2;
    margin: 0 auto;
}

.seil {
    position: absolute;
    top: 3px;
    left: 5px;
    z-index: 4;
}

Neu hinzugekommen ist die Festlegung für den "div-Container #auf", für die zusätzlichen Bilder (.null, .eins, .zwei, .drei) und den Zahlenhintergrund (.zahlen), für die Platzierung der Links (.aufziehen, .zuziehen) zum Auf- und Zuziehen des Vorhangs und eine kleine Animation mit Strahlen.

#auf {
    width: 53.2em;
    height: 30em;
    margin: 2em auto 0;
    padding: 0;
}

.zahlen {
    position: absolute;
    z-index: 0;
    margin: 0 auto;
    opacity: 0;
}

.null,
.eins,
.zwei,
.drei {
    position: absolute;
    margin: auto;
    text-align: center;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: 1;
}

.aufziehen,
.zuziehen {
    position: absolute;
    left: 5px;
    width: 4em;
    height: 3em;
    z-index: 6;
}

.aufziehen {
    top: 120px;
}

.zuziehen {
    top: 200px;
}

.strahlen {
    position: absolute;
    height: 31.25em;
    width: 31.25em;
    z-index: -1;
    top: 35px;
    left: 150px;
    opacity: .1;
}

Nun kommen wir zu den einzelnen Animationen.
Mit "img:nth-of-type(x)" spreche ich das x-te Bild in meinem "div-Container #auf" an. Mit "#auf:target" wird auf das Ereignis des Mausklicks auf das Seil zum Öffnen des Vorhangs reagiert und mit "#zu:target" auf das Ereignis des Mausklicks auf das Seil zum Schließen des Vorhangs.
Durch "ease-in-out" beginnt und endet das Öffnen und Schließen des Vorhangs langsam, in der Mitte ist die Geschwindigkeit am höchsten. Mit dem Befehl "animation: forwards" behält das animierte Objekt, also der Vorhang und das Seil, nach Ablauf der Animationszeit den Style der letzten "@keyframes-Regel". Mit anderen Worten, der Vorhang bleibt geöffnet und das Seil bleibt unten. Alle anderen Bewegungen erhalten eine gleichbleibende Geschwindigkeit.

#auf:target img:nth-of-type(1) {
    animation: spin 100s infinite linear;
}

#zu:target img:nth-of-type(1) {
    animation: spinz 100s linear;
}

#auf:target img:nth-of-type(2) {
    animation: aufl 6s 1s ease-in-out forwards;
}

#zu:target img:nth-of-type(2) {
    animation: auflz 5s ease-in-out forwards;
}

#auf:target img:nth-of-type(3) {
    animation: aufr 6s 1s ease-in-out forwards;
}

#zu:target img:nth-of-type(3) {
    animation: aufrz 5s ease-in-out forwards;
}

#auf:target img:nth-of-type(4) {
    animation: kord 1s linear forwards;
}

#zu:target img:nth-of-type(4) {
    animation: kordz 1s linear forwards;
}

#auf:target img:nth-of-type(7) {
animation: zahlhin 12s linear forwards;
}

#auf:target img:nth-of-type(8) {
    animation: zahl 8s 2s linear;
}

#auf:target img:nth-of-type(9) {
    animation: zahl 8s 4s linear;
}

#auf:target img:nth-of-type(10) {
    animation: zahl 8s 6s linear;
}

#auf:target img:nth-of-type(11) {
    animation: zahl 8s 8s linear;
}

@keyframes spin {
      0% {transform: rotate(0deg)}
    100% {transform: rotate(360deg)}
}

@keyframes spinz {
      0% {transform: rotate(360deg)}
    100% {transform: rotate(0deg)}
}

@keyframes aufl {
      0% {transform: translate3d(0,0,0) scaleX(1)}
    100% {transform: translate3d(-165px,0,0) scaleX(.2)}
}

@keyframes auflz {
      0% {transform: translate3d(-165px,0,0) scaleX(.2)}
    100% {transform: translate3d(0,0,0) scaleX(1)}
}

@keyframes aufr {
      0% {transform: translate3d(0,0,0) scaleX(1)}
    100% {transform: translate3d(168px,0,0) scaleX(.2)}
}

@keyframes aufrz {
      0% {transform: translate3d(168px,0,0) scaleX(.2)}
    100% {transform: translate3d(0,0,0) scaleX(1)}
}

@keyframes kord {
      0% {transform: translate3d(0,0,0)}
     20% {transform: translate3d(0,40px,0)}
     40% {transform: translate3d(0,32px,0)}
     60% {transform: translate3d(0,38px,0)}
     80% {transform: translate3d(0,34px,0)}
    100% {transform: translate3d(0,36px,0)}
}

@keyframes kordz {
      0% {transform: translate3d(0,36px,0)}
     20% {transform: translate3d(0,-4px,0)}
     40% {transform: translate3d(0,4px,0)}
     60% {transform: translate3d(0,-2px,0)}
     80% {transform: translate3d(0,2px,0)}
    100% {transform: translate3d(0,0,0)}
}

@keyframes zahlhin {
      0%, 80% {opacity:1}
         100% {opacity:0}
}

@keyframes zahl {
    6.66%, 20%          {opacity:.7}
    0%,    26.66%, 100% {opacity:0}
}
  • "@keyframes spin" - die Strahlen werden nach 10 Sekunden eingeblendet und drehen sich beim Öffnen um 360 Grad im Uhrzeigersinn, beim Schließen "@keyframes spinz" drehen sich die Strahlen um 360 Grad gegen den Uhrzeigersinn.
  • "@keyframes aufl" - der linke Vorhang wird beim Öffnen auf 20% in der Breite verkleinert und um 165 Pixel nach links versetzt, beim Schließen "@keyframes auflz" wird wieder der Ursprungszustand hergestellt.
  • "@keyframes aufr" - der rechte Vorhang wird beim Öffnen ebenfalls auf 20% in der Breite verkleinert und um 168 Pixel nach rechts versetzt, beim Schließen "@keyframes aufrz" wird wieder der Ursprungszustand hergestellt.
  • "@keyframes kord" - Der Bounce-Effekt, also das Hoch- und Runterschwingen des Seils wird durch unterschiedliche Höhenangaben des Seils erreicht, beim Schließen "@keyframes kordz" wird das Prellen des Seils umgekehrt realisiert.
  • "@keyframes zahlhin" - Der dunkle Hintergrund wird nach Ablauf des Countdowns langsam ausgeblendet und das Bild erscheint.
  • "@keyframes zahl" - Die Zahlen werden nacheinander ein- und ausgeblendet.

Damit ist das Intro für eine Diashow fertig!
Klicken sie zum Starten des Intro mit der Maus oben auf das Seil. Zum Schließen des Vorhangs müssen sie etwas unterhalb klicken.

Photo © Monika & Klaus Franz


Zum Seitenanfang springen Λ