Animierter Hintergrund und Navigation mit jQuery und jParallax

Als Parallaxe bezeichnet man die scheinbare Positionsänderung eines Objekts, wenn sich die Position des Betrachters verändert. Das Wort leitet sich vom griechischen Wort parallaxis (dt. “Veränderung, Abweichung”) ab.

Parallaxe - Durch Blickwinkeländerung verändertsich scheinbar die Position des Objekts

Im Web Design wird dieser Effekt zunehmend beliebter. Heute möchte ich euch zeigen, wie ihr mit jQuery und dem Plugin jParallax ein Web-Seiten-Layout erstellt, in dem Hintergrund und Navigation animiert sind und zusätzlich auf die Bewegung der Maus reagieren.

Den Download der Demoseite gibt es am Ende des Artikels

Als erstes laden wir uns die aktuellste Version von jParallax herunter

und inkludieren die jquery.jparallax.min.js nach jQuery in den Kopf unserer Seite.

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.jparallax.min.js"></script>
    <script type="text/javascript">
      $(document).ready(function(){
          <!--Aufruf von jParallax wenn das Dokument geladen wurde-->
      });
    </script>

Layout und CSS

Das DIV id=”parallax” enthält alle Elemente (class=”parallax-layer”) die bei der Seitennutzung parallax verschoben werden. Diese Elemente werden absolut bzw. relativ positioniert und überlagern deshalb andere Elemente.

Wichtig:  Alle Elemente (class=”parallax-layer”) müssen eine Größenangabe besitzen.

Da die parallaxen Ebenen alle anderen Elemente überlagern, brauchen wir für den Inhaltsbereich ebenfalls ein DIV(class=”page”), welches absolut oder relativ positioniert ist.

<body>
    <div id="parallax">
        <img class="parallax-layer" style="width:2000px; height:919px;" src="aurora.jpg">
        <img class="parallax-layer" style="width:513px; height:518px;" src="earth.png">

        <div class="parallax-layer header">
            <div class="tophead">
                <div class="headlayer layer1">Parallax Page-Layout</div>
                <div class="headlayer layer2">Parallax Page-Layout</div>
                <div class="headlayer layer3">Parallax Page-Layout</div>

            </div>
            <div class="menubg"></div>
        </div>

        <div class="parallax-layer menu">
            <ul id="menu">
                <!--Menüobjekte-->
            </ul>
        </div>
    </div>

    <div class="page">
        <div class="content">
            <div class="left"></div>
            <div class="right"></div>
            <div style="clear: both;"></div>
        </div>
    </div>
</body>

Der Seitenhintergrund soll animiert sein, also muss sich das DIV id=”parallax” über den gesamten Viewport erstrecken. Außerdem ist für die Nutzung von jParallax noch etwas CSS erforderlich. Mit position:fixed lassen wir den Hintergrund mitscrollen.

#parallax {
    position:fixed; overflow:hidden; height: 100%; width: 100%;
}
.parallax-layer {
    position: absolute;
}

Javascript

Der Aufruf der Parallax-Funktion erfolgt mit $(‘.parallax-layer’).parallax(); .
Die Funktion lässt sich mit optionalen Paramatern konfigurieren und es können sogar einzelne Ebenen angesprochen werden.

  • Die erste Reihe an Parametern ist global und gilt für alle Ebenen, danach folgen die der einzelnen Ebenen.
  • Die erste Ebene ist der Hintergrund,er wird nicht konfiguriert, deshalb bleibt der Bereich zwischen { und } leer.
  • Die zweite Ebene beinhaltet einen Planeten, der leicht aus dem Viewport herausragen soll und bei Mausbewegung seine Position verändern soll.
  • Die dritte Ebene ist der Header, er beinhaltet ebenfalls den Hintergrund der Navigation. Diese Ebene ist nicht animiert.
  • Die vierte Ebene beherbergt die Navigation, diese soll ihre Position nur auf horizontaler Ebene verändern.

Plugin-Konfiguration

  • mouseport: Selektor oder jQuery Objekt
    Der Bereich, in dem die Bewegung der Maus eine Animation hervorruft.
  • decay: 0-1
    Wie direkt die Animation auf die Mausbewegung reagieren soll. 
  • xorigin: 0-1 | ‘n%’ | ‘left’, ‘center’, ‘middle’, ‘right’
    Der Ausgangspunkt der Ebene auf der x-Ache. Werte können auch negativ oder größer als 1 (100%) sein.
  • yorigin: siehe xorigin
  • xparallax: boolean | 0-1 | ‘n%’ | ‘npx’
    Grad der Verschiebung auf der x-Achse. Werte können auch negativ oder größer als 1 (100%) sein.
  • yparallax: siehe xparallax
  • Die gesamte Konfiguration gibt es hier http://stephband.info/jparallax/
$(document).ready(function(){

        $('.parallax-layer').parallax({decay:0.9,mouseport:'#parallax, .page'},
        {},
        {yorigin: -0.8,xorigin:-0.3,yparallax: 0.1,xparallax: 0.3},
        {xorigin:0.5,yparallax: 0,xparallax: 0},
        {xorigin:0.5,yparallax: 0,xparallax: 0.2}
        );

});

Projektdateien hier durch ein Like, Tweet oder +1 herunterladen!
  • Diesen Beitrag weiterempfehlen:

4 Gedanken zu „Animierter Hintergrund und Navigation mit jQuery und jParallax

  1. Pingback: Viktor kokott | Chemicalsalest

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *


× sieben = vierzig zwei

Du kannst folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>