Parallax Scrolling mit WordPress

Um hier dann doch mal etwas zu schreiben, beschreibe ich einfach meinen Versuch, Parallax Scrolling auf diese Site zu bringen.
Als Tutorial benutze ich dazu:
http://net.tutsplus.com/tutorials/html-css-techniques/simple-parallax-scrolling-technique/
Mein aktuelles Theme ist Elisium ( http://wordpress.org/themes/elisium ) – finde ich schön schlicht, dabei doch recht schick.
Da wir möglichst wenig an WordPress ändern wollen, werde ich versuchen das Anpassen auf die style.css und die footer.php des Themes zu begrenzen. Und um es nicht unnötig kompliziert zu machen, nutze ich den Editor, der direkt unter der WordPress-Admin-Oberfläche zu finden ist.
Also erstmal in die style.css
Da das voreingestellte Hintergrundbild von <body> nur winzig ist, was bei Parallax Scrolling meiner Meinung nach nicht wirkt, ersetzen wir den Hintergrund vorerst durch ein eigenes Bild mit den Maßen 2000×924 und passen den entsprechenden Eintrag gemäß des Tutorials an:

body {
  margin:0;
  padding:0;
  background:url('http://temp.kuechenscha.be/background.jpg') 50% 0 repeat fixed; min-height: 924px;
  height: 924px;
  margin: 0 auto;
  width: 100%;
  max-width: 2000px;
  position: relative;
  font-family:Arial;
  font-size:14px;
  color:#000000;
}

Das sollte es in der style.css gewesen sein. Rüber zur footer.php

Da wir keine Änderungen an dem Sourcecode vorgenommen haben, besitzen wir keine „section“ mit „data-type=background“, also greifen wir lediglich auf body zurück.
Da auch kein „data-speed“ vorhanden ist verwenden wir einfach einen festen Wert (10).
Um dem JQuery-Interpreter etwas Arbeit abzunehmen, können wir noch $(document.body) einfügen, da wir nur ein festes Objekt benutzen.
Mit einigen weiteren Vereinfachungen ergibt sich letztendlich folgender Code, der unten an die footer.php angehangen wird:

<script>
$(document).ready(function(){
  $(window).scroll(function() {
    var yPos = -($(window).scrollTop() / 10);
    var coords = '50% '+ yPos + 'px';
    $(document.body).css('background-position', coords);
  });
});
</script>

Das Ganze funktioniert, jedoch stockt es etwas bei mir – was den schönen Effekt leider etwas zunichte macht. Werde dieser Sache allerdings noch auf den Grund gehen.

One thought on “Parallax Scrolling mit WordPress

Hinterlasse eine Antwort

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

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

500px

© 2014 - Testwiese. All Rights Reserved. Powered by Wordpress and Design by We Create Web Designs