Webdesign - Einfaches CSS3 mit 3D-Effekt und Bewegungsparallaxe

  1. Zum Inhalt springen

webdesign
klamonfra
Klaus Franz


     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

Photo © Monika & Klaus Franz

Wie wird ein 3D-Effekt oder Parallaxen-Effekt erstellt?

26Sep2014

Einfaches CSS3 mit 3D-Effekt und Bewegungsparallaxe.


Einen fantastischen 3D-Effekt erzeugt man durch eine Bewegungsparallaxe. Bei diesem Effekt bewegen sich manche Elemente, beim Überfahren eines Bildes mit dem Mauszeiger, langsamer als andere und damit entsteht beim Betrachten des Bildes ein Gefühl der Tiefe.
Das hier dargestellte Beispiel ist nur mit HTML5 (HyperText Markup Language) und CSS (Cascading Style Sheet) realisiert. In diesem Beitrag werde ich die einzelnen Schritte für diesen Effekt erklären.


Um meine Umsetzung zu erklären beginne ich zuerst einmal mit einem einfachen Beispiel.
Wie im Artikel über den Hover-Effekt beschrieben, sieht der HTML (HyperText Markup Language)-Aufbau ähnlich aus. Ich benötige allerdings keine Überschriften oder Begleittexte, und außerdem werden, wie schon im Artikel der Keyframe-Animation beschrieben, die Bilder direkt ins CSS3 (Cascading Style Sheet) eingebunden.
Das "figure-Element" beinhaltet dabei das Hintergrundbild mit den entsprechenden Abmessungen und mit "cursor: move" zeige ich an, dass das Objekt bewegt werden kann. Das "p-Element" beinhaltet das Bild des Hasen, erhält die entsprechenden Abmessungen und wird auf das Bild positioniert. Mit der Angabe "z-index: 10" wird der Hase dann noch in den Vordergrund gesetzt.

Der HTML (HyperText Markup Language)-Code ist sehr einfach aufgebaut und sieht wie folgt aus:

<figure id="dd1">
    <p> </p>
</figure>

Und das entsprechende CSS (Cascading Style Sheet):

#dd1 {
    position: relative;
    width: 41.25em;
    height: 28.4em;
    margin: 1em auto;
    border: 5px solid #eee;
    box-shadow: 1px 1px 5px 2px #777;
    background: url(../bilder660/reisen_suedtirol201005.jpg);
    cursor: move;
}

#dd1 p {
    position: absolute;
    width: 9em;
    height: 12em;
    top: 180px;
    left: 20px;
    background: url(/bilder/hase2.png) no-repeat;
    z-index: 10;
}

#dd1:hover p {
    display: block;
    top: 200px;
    left: 200px;
}

 

Photos © Monika & Klaus Franz


Beim Überfahren des Bildes mit dem Mauszeiger, springt der Inhalt des "p-Elements", also das Bild des Hasen, um 20 Pixel nach unten und 180 Pixel nach rechts.


Im nächsten Beispiel soll der Hase an Hand der Mausbewegung in vier Schritten nach rechts wandern.
Hierfür benutze ich vier "p-Elemente" die mit der Pseudoklasse ":nth-child(n)" angesprochen werden, und bei der jedes Element nur noch 1/4 der Breite des Bildes, also 10.3 em, einnimmt. Mit "float: left" werden diese Elemente nebeneinander gelegt und dieses Mal ist der Inhalt des "span-Elements" das Bild des Hasen.

Der HTML (HyperText Markup Language)-Code sieht wie folgt aus:

<figure id="dd2">
    <p><span> </span></p>
    <p><span> </span></p>
    <p><span> </span></p>
    <p><span> </span></p>
</figure>

Und das zugehörige CSS (Cascading Style Sheet):

#dd2 {
    position: relative;
    width: 41.25em;
    height: 28.4em;
    margin: 1em auto;
    border: 5px solid #eee;
    box-shadow: 1px 1px 5px 2px #777;
    background: url(../bilder660/reisen_suedtirol201005.jpg);
    cursor: move;
}

#dd2 p {
    margin: 0;
    padding: 0;
    width: 10.3em;
    height: 100%;
    float: left;
}

#dd2 span {
    position: absolute;
    width: 9em;
    height: 12em;
    top: 180px;
    left: 20px;
    background: url(/bilder/hase2.png) no-repeat;
    display: none;
    z-index: 10;
}

#dd2 p:hover span, {
    display: block;
}

#dd2 p:nth-child(1):hover span {
    top: 180px;
    left: 20px;
}

#dd2 p:nth-child(2):hover span {
    top: 190px;
    left: 150px;
}

#dd2 p:nth-child(3):hover span {
    top: 200px;
    left: 280px;
}

#dd2 p:nth-child(4):hover span {
    top: 210px;
    left: 410px;
}

 

 

 

 

Befindet sich der Mauszeiger nicht über dem Hintergrundbild ist der Hase ausgeblendet und erst beim Überfahren der "p-Elemente" mit dem Mauszeiger wird der Hase eingeblendet.
Ist der Mauszeiger zum Beispiel ganz links im Bild, wird der Hase in einem Abstand von 20 Pixel vom linken Rand eingeblendet. Befindet sich der Mauszeiger ganz rechts im Bild, erscheint der Hase 410 Pixel vom linken Rand entfernt. Und bewege ich den Mauszeiger von links nach rechts über das Hintergrundbild hüpft der Hase im Abstand von 130 Pixel nach rechts.


Um nun einen fließenden Verlauf von links nach rechts zu erhalten, muss man nur die Breite der Verweise verkleinern und je geringer die Breite ist, desto flüssiger wird die Bewegung. Am besten wären natürlich Ebenen mit jeweils 1 Pixel Breite, aber das würden die Browser nicht mehr schnell genug darstellen können.

Für das folgende Beispiel habe ich mich also auf 65 "Hover-Elemente" mit einer Breite von jeweils 0,625 em beschränkt. Man kann sich aber leicht vorstellen, dass der HTML (HyperText Markup Language)-Code mit den 65 "p-" und "span-Elementen", sowie das CSS (Cascading Style Sheet) für die Position des Hasen in jedem "p-Element", trotzdem sehr aufwendig zu schreiben ist. Hinzu kommt auch noch die Berechnung der Position des Hasen.
Um das alles von Hand zu schreiben, fehlen mir Zeit und Lust, also habe ich hierfür zwei kleine php-Scripte (Skriptsprache: Hypertext Preprocessor) geschrieben, die mir die Arbeit abnehmen.

Der HTML (HyperText Markup Language)-Code mit dem kleinen php-Script (Skriptsprache: Hypertext Preprocessor) bleibt dadurch sehr einfach und übersichtlich:

<figure id="dd3">
    <?php
    for ($z=0; $z<66; $z++)
    {
      echo '<p><span> </span></p>';
    }
    ?>
</figure>

Und auch das zugehörige CSS (Cascading Style Sheet) mit dem Namen "3d-effekt.css" bleibt sehr klein:

#dd3 {
    position: relative;
    width: 41.25em;
    height: 28.4em;
    margin: 1em auto;
    border: 5px solid #eee;
    box-shadow: 1px 1px 5px 2px #777;
    background: url(../bilder660/reisen_suedtirol201005.jpg);
    cursor: move;
}

#dd3 p {
    margin: 0;
    padding: 0;
    width: .625em;
    height: 100%;
    float: left;
}

#dd3 span {
    position: absolute;
    width: 9em;
    height: 12em;
    top: 180px;
    left: 20px;
    background: url(/bilder/hase2.png) no-repeat;
    display: none;
    z-index: 10;
}

#dd3 p:hover span {
    display: block;
}

Nach dem Einbinden der CSS (Cascading Style Sheet)-Datei "3d-effekt.css" in dem "php-Script (Skriptsprache: Hypertext Preprocessor)" wo die CSS-Dateien zusammengefasst werden, füge ich die folgenden Zeilen in das php-Script (Skriptsprache: Hypertext Preprocessor) ein:

<?php
    .
    .
    .
  $content .= get_remote_file('.../css/3d-effekt.css');

  for ($z=0; $z<66; $z++) {
    echo '#dd3 p:nth-child('.$z.'):hover span{';
    echo 'left: '.(20+($z*7)).'px; top: '.(180+$z/2).'px}';
  }
?>

Das war es auch schon, um den Effekt des laufenden Hasen zu erzielen.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Das Resultat: Der Hase bewegt sich ohne großes Ruckeln von links nach rechts in Abhängigkeit des Mauszeigers, solange man sich mit dem Mauszeiger nicht direkt über dem Bild des Hasen befindet.


Anhand dieser einfachen Beispiele erstelle ich nun den 3D-Effekt mit mehreren Ebenen.

Zuerst einmal wird das vorhandene Bild...

Blume aus dem Rahmen

... in vier verschiedene Teilbilder (Hintergrundbild, Rahmen, andere Blumen, einzelne Blüte) zerlegt und die entstandenen Löcher im Hintergrundbild, auf dem Rahmen und auf dem Teilbild der anderen Blüten, wieder so gefüllt als wäre die einzelne Blüte nie Bestandteil der Bilder gewesen.

Das Hintergrundbild Der Rahmen Die anderen Blumen Einzelne Blüte

Das Ausschneiden der Teilbilder und Füllen der Löcher nimmt für den 3D-Effekt die meiste Zeit in Anspruch.

Für den Effekt werden in diesem Beispiel 139 vertikale "Hover-Elemente" von jeweils 0.3348 em Breite und 31.25 em Höhe mit den einzelnen Bildelementen erstellt. Die Positionen werden wieder für jedes vertikale Element berechnet und ins CSS (Cascading Style Sheet) geschrieben. Natürlich nutze ich hierfür, und auch für die Darstellung im HTML (HyperText Markup Language), wieder die beiden kleinen "php-Scripte (Skriptsprache: Hypertext Preprocessor)".
Bei diesem Effekt mit mehreren Ebenen wird aber noch ein zusätzliches "span-Element" benötigt, das über den anderen "span-Elementen" liegt. Man kann sich das wie bei einem Stapel vorstellen. Und dieses Element wird dann für das Überfahren mit dem Mauszeiger benötigt. Also wird das in meinem Beispiel noch zusätzlich eingefügt.

Damit ergibt sich folgender HTML (HyperText Markup Language)-Code:

<figure id="dd4">
    <?php
    for ($z=0; $z<140; $z++)
    {
      echo '<p id="e'.$z.'">';
      echo '<span> </span><span> </span><span> </span><span> </span>';
      echo '<span> </span>';
      echo '</p>';
    }
    ?>
</figure>

Da ich in diesem Beispiel auch den Hintergrund verschieben möchte, wird das farbige Originalbild im übergeordneten "figure-Element" durch die Angabe "z-index: 0" in den Hintergrund gesetzt und, nach dem der Mauszeiger über das Bild fährt, die einzelnen Teilbilder durch die Angabe des "z-index > 0" entsprechend über das Originalbild gelegt. Das passende CSS (Cascading Style Sheet) zu dem Beispiel:

#dd4 {
    position: relative;
    width: 43.75em;
    height: 31.25em;
    margin: 1em auto;
    border: 5px solid #eee;
    box-shadow: 1px 1px 5px 2px #777;
    background: url('/bilder/20.jpg');
    overflow: hidden;
    z-index: 0;
}

#dd4 p {
    margin: 0;
    padding: 0;
    width: ..3348em;
    height: 31.25em;
    cursor: move;
    float: left;
    z-index: 10;
}

#dd4 span:nth-child(5) {
    position: absolute;
    width: .3348em;
    height: 31.25em;
    cursor: move;
    z-index: 10;
}

#dd4 span:nth-child(1),
#dd4 span:nth-child(2),
#dd4 span:nth-child(3),
#dd4 span:nth-child(4) {
    position: absolute;
    width: 46.875em;
    height: 31.25em;
    top: 0;
    left: 0;
    display: none;
}

#dd4 p:hover span {
    display: block;
}

#dd4 span:nth-child(1) {
    background: url(/bilder/201.jpg);
    z-index: 1;
}

#dd4 span:nth-child(2) {
    background: url(/bilder/202.png);
    z-index: 3;
}

#dd4 span:nth-child(3) {
    width: 43.75em;
    background: url(/bilder/203.png);
    z-index: 2;
}

#dd4 span:nth-child(4) {
    background: url(/bilder/204.png);
    z-index: 4;
}

Und wie eben erklärt füge ich die folgenden Zeilen in das php-Script (Skriptsprache: Hypertext Preprocessor) ein. Die Pixelangaben für die Verschiebung der Positionen muss man durch Ausprobieren ermitteln.

<?php
    .
    .
    .
  $content .= get_remote_file('.../css/3d-effekt.css');

  for ($z=0; $z<140; $z++) {
    echo 'p#e'.$z.':hover span:nth-child(1)
          {background-position: '.(15-($z/1.7)).'px}';
    echo 'p#e'.$z.':hover span:nth-child(2){left: '.(-2-($z/3)).'px}';
    echo 'p#e'.$z.':hover span:nth-child(3){left: '.(46-($z/1.5)).'px}';
    echo 'p#e'.$z.':hover span:nth-child(4){left: '.(-18-($z/10)).'px}';
  }
?>

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

Damit habe ich einen schönen 3D-Effekt nur mit HTML5 (HyperText Markup Language) und CSS (Cascading Style Sheet) realisiert. Und am Anfang dieses Artikels sind die Bewegungen der Ebenen umgekehrt.

Zum Seitenanfang springen Λ