Wednesday, March 21st, 2007

Parallax Effect for Backgrounds

Category: CSS, JavaScript, Library

Brett Taylor wanted to see if he could make a parallax effect in HTML+CSS+JS and make it cross-browser and came up with Parallax Backgrounds.

Scroll around and you will see that the text and content scrolls normally, but the different background layers scroll at different speed.

Maybe as useful as SKIP INTRO, but a nice experiment.

javascript

  1. function calcParallax(tileheight, speedratio, scrollposition) {
  2.   //    by Brett Taylor http://inner.geek.nz/
  3.   //    originally published at http://inner.geek.nz/javascript/parallax/
  4.   //    usable under terms of CC-BY 3.0 licence
  5.   //    http://creativecommons.org/licenses/by/3.0/
  6.   return ((tileheight) - (Math.floor(scrollposition / speedratio) % (tileheight+1)));
  7. }
  8.  
  9. window.onload = function() {
  10.  
  11.   window.onscroll = function() {
  12.     var posX = (document.documentElement.scrollLeft) ? document.documentElement.scrollLeft : window.pageXOffset;
  13.     var posY = (document.documentElement.scrollTop) ? document.documentElement.scrollTop : window.pageYOffset;
  14.    
  15.     var ground = document.getElementById('ground');
  16.     var groundparallax = calcParallax(53, 8, posY);
  17.     ground.style.backgroundPosition = "0 " + groundparallax + "px";
  18.  
  19.     var clouds = document.getElementById('clouds');
  20.     var cloudsparallax = calcParallax(400, .5, posY);
  21.     clouds.style.backgroundPosition = "0 " + cloudsparallax + "px";
  22.   }
  23.  
  24.   document.getElementById('javascriptcode').onscroll = function() {
  25.     var posX = (this.scrollLeft) ? this.scrollLeft : this.pageXOffset;
  26.     var j = calcParallax(53, 16, posX);
  27.     console.log('scroll js: '+ j);
  28.     document.getElementById('javascriptcode').style.backgroundPosition = j + "px 0";
  29.   }
  30. }

Parallax Background

Posted by Dion Almaer at 9:08 am
21 Comments

+++--
3 rating from 49 votes

21 Comments »

Comments feed TrackBack URI

Nice experiment … but It so flicky this way ? Maybe with some smooth animation, It could be better :)

Comment by Nicolas — March 21, 2007

That is pretty useless… but it looks great!

Comment by Tobie Langel — March 21, 2007

The effect is making me a bit sick. Buts a nice experiment. Works like a charm, except when using the scroll wheel…. (FF 2.0.2)

Comment by van der Burgt — March 21, 2007

Just because we can doesn’t mean we should.

Nice experiment though.

Comment by erlando — March 21, 2007

I *love* parallax scrolling! Very nice! Too bad it’s so shaky.. at least in FF it is.

Comment by Maarten Manders — March 21, 2007

Reminds me of Super Mario World… only vertical instead of horizontal.

Comment by Tim Tripcony — March 21, 2007

The further away the object the slower it should scroll, so the text should scroll normal, the clouds a bit slower and the background even slower. It’s a bit strange now.

Comment by Marc — March 21, 2007

Reminds me of Super Mario World… only vertical instead of horizontal.

Exactly. I was just saying to a friend, “it’s kind of neat, the Internet is at about the level of neat whiz-bang features as the SNES was… which really was the glory day of video games.”

Comment by Trevor — March 21, 2007

Doesn’t seem to work when I use the mouse wheel to scroll.

Comment by Jef Poskanzer — March 21, 2007

Works a lot better in IE7, but the FF fanboys won’t admit. Just joking :D

Comment by Juca — March 21, 2007

Actually, SKIP INTRO is immensely useful, it is the intro itself that is useless. /nit-picking

Comment by Martin — March 21, 2007

This is a nice 3D type effect.
Pretty much useless, but I really like the idea!
Well done for implementation!

Comment by Simos — March 21, 2007

For firefox, go to tools>options>advanced and check “Use smooth scrolling”. All will be good.

Comment by Pi — March 21, 2007

Funky… I wonder what it would take to make a Street Fighter 2 style parallax effect?

Comment by Marcos Caceres — March 21, 2007

Actually, I built a single layered version of this exact effect as a part of a website I worked on some years ago.. I decided against using the effect in the end though because it was making scrolling run way too laggy at the time (back when computers weren’t so fast).

it can be a very nice effect though if done more subtly than in this example, especially if most of your users are using newer computers. :)

Comment by Jenna Fox — March 21, 2007

Well it works like crap in Opera 9.10
and Opera is more compliant than FirePox.

Comment by mebabyme — March 22, 2007

Very slow in firefox on my office pc. :(

Comment by Valentino — March 22, 2007

I was expecting some clever perspective effects. I’m not sure I see the point, having seen the end result. Nice experiment though.

Just in case Brett is interested; using the scroll wheel across ie7 and ff2.0.0.3 reduce the affect of the code. It didn’t work in o9.10 at all.

Comment by Richard Kimber — March 22, 2007

The parallax effect is definitely the wrong way round.

Comment by Andrew Wilson — March 22, 2007

I was playing with the same idea a couple of months ago…

http://www.toservices.com/experiments/parallax/ (warning: *large* background images)

Yeah, Firefox unfortunately sucks at rendering moving images (IE and Opera look *much* nicer). And also, using this type of effect in a page with tons of image tags is a big no-no. I had generic box images to make the floor collision lines visible in my map, and that alone would drop the fps to less than half. =(

Comment by Leo Horie — March 31, 2007

I’m working on a series of “Javascript Feelings” which attempt to explain complex human emotions using Javascript. I’ve used the parallax effect in my first piece entitled “Intimacy With Strangers.”

http://verytogether.com/lifestyle/play/javascript-feelings-intimacy-with-strangers.html

Comment by metaphoro — February 20, 2010

Leave a comment

You must be logged in to post a comment.