Hintergrundanimation mit jParallax
Das jQuery-Plugin jParallax kann hier herunter geladen werden. Außerdem benötig man noch JQuery selbst, am besten in der komprimierten Version.
Für die Arbeit mit jParallax eigenen sich PNG-Garfiken besser als GIF-Grafiken (JPG ist höchsten für den Hintergrund sinnvoll). Allerdings haben die älteren Versionen des Internet Explorer Probleme mit der korrekten Darstellung von PNG-Grafiken. Daher sollte mit einem Condicional Comment noch
jquery.ifixpng.js eingebunden werden.
Einbau in die Webseite
Mit
<style type="text/css">
#parallax
{position:relative;
overflow:hidden;
width:960px;
height:180px;
}
</style>
wird die Größe des Div-Elementes definiert, in der die jParallax-Animation angezeigt werden soll.
Mit
jQuery('#parallax').jparallax({})
wird jParallax initialisiert. In dem hier gezeigten Beispiel ist die Initialisierung etwas umfangreicher:
var corners = '<img src="corner_white_tl.png" class="tl" />'+
'<img src="corner_white_tr.png" class="tr" />'+
'<img src="corner_white_bl.png" class="bl" />'+
'<img src="corner_white_br.png" class="br" />';
jQuery(document).ready(function(){
jQuery('#parallax').jparallax({}).append(corners);
});
da noch die Bilder für die abgerundeten Ecken angefügt werden. Es ist in den meisten Fällen nicht sinnvoll, die in den jParallax-div-Layer eingebundenen Bilder direkt mit abgerundeten Ecken zu versehen.
Die Hauptbilder werden dann in dieser Form eingebunden:
<div id="parallax" class="clear"> <div style="width:1090px; height:190px;"> <img src="bg-clouds.png" alt="" style="position:absolute;left:0px;top:0px;"/> </div> <div style="width:560px; height:173px;"> <img src="flying_bird_sparkles-01.png" alt="" style="position:absolute;left:200px;top:12px;"/> </div> <div style="width:860px; height:213px;"> <img src="flying_bird_sparkles-01.png" alt="" style="position:absolute;left:300px;top:22px;"/> </div> <div style="width:660px; height:213px;"> <img src="1272560548Hail_Heavy.png" alt="" style="position:absolute;left:100px;top:22px;"/> </div> <div style="width:760px; height:213px;"> <img src="flying_bird_sparkles-02.png" alt="" style="position:absolute;left:50px;top:22px;"/> </div> <div style="width:560px; height:213px;"> <img src="flying_bird_sparkles-03.png" alt="" style="position:absolute;left:400px;top:62px;"/> </div> </div>
Beispiel
Das ganze kann da so aussehen:
