Wie kann ich den Hintergrund einer Webseite beim scrollen seitlich bewegen lassen?
Ich bin relativ neu in der Webdesign-Branche und surfte etwas, um mir Inspirationen einzufangen. Bei der Internetseite der Firma Unilever (Unilever.com). blieb ich hängen und fragte mich, wie es wohl funktioniert, dass sich der Hintergrund beim auf und ab scrollen horizontal bewegt. nur mit html und css ist dies nicht möglich, oder? aber wie dann?
2 Antworten
Als erstes solltest du dir zumindest Grundlagen von jQuery anschauen, damit du halbwegs verstehst, was du da machst. ( http://www.webwaerts.net/jquery-tutorial-fuer-einsteiger-1/ )
Ansonsten sollte dir das weiterhelfen: jQuery: $(window).scroll(function(){ $('#div').css("background-position",parseInt($(this).scrollTop()*0.1)); })
CSS
body{ background-image:url(images/background.jpg); background-position:center top; background-repeat:no-repeat; background-attachment:fixed; }
Entweder muss das Hintergrundbild groß genug sein, damit seitlich scrollt oder du brauchst mehrere Bilder im Hintergrund die nacheinander gescrollt werden. Willst du in die andere Richtung scrollen:[..] .scrollTop()*-0.1));
Dazu brauchst du Javascript in Kombination mit CSS:
Schau dir das hier mal an:
http://stackoverflow.com/questions/5001447/jquery-on-window-scroll-animate-background-image-position