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.
- function calcParallax(tileheight, speedratio, scrollposition) {
- // by Brett Taylor http://inner.geek.nz/
- // originally published at http://inner.geek.nz/javascript/parallax/
- // usable under terms of CC-BY 3.0 licence
- // http://creativecommons.org/licenses/by/3.0/
- return ((tileheight) - (Math.floor(scrollposition / speedratio) % (tileheight+1)));
- }
- window.onload = function() {
- window.onscroll = function() {
- var posX = (document.documentElement.scrollLeft) ? document.documentElement.scrollLeft : window.pageXOffset;
- var posY = (document.documentElement.scrollTop) ? document.documentElement.scrollTop : window.pageYOffset;
- var ground = document.getElementById('ground');
- var groundparallax = calcParallax(53, 8, posY);
- ground.style.backgroundPosition = "0 " + groundparallax + "px";
- var clouds = document.getElementById('clouds');
- var cloudsparallax = calcParallax(400, .5, posY);
- clouds.style.backgroundPosition = "0 " + cloudsparallax + "px";
- }
- document.getElementById('javascriptcode').onscroll = function() {
- var posX = (this.scrollLeft) ? this.scrollLeft : this.pageXOffset;
- var j = calcParallax(53, 16, posX);
- console.log('scroll js: '+ j);
- document.getElementById('javascriptcode').style.backgroundPosition = j + "px 0";
- }
- }
3 rating from 49 votes
Nice experiment … but It so flicky this way ? Maybe with some smooth animation, It could be better :)
That is pretty useless… but it looks great!
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)
Just because we can doesn’t mean we should.
Nice experiment though.
I *love* parallax scrolling! Very nice! Too bad it’s so shaky.. at least in FF it is.
Reminds me of Super Mario World… only vertical instead of horizontal.
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.
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.”
Doesn’t seem to work when I use the mouse wheel to scroll.
Works a lot better in IE7, but the FF fanboys won’t admit. Just joking :D
Actually, SKIP INTRO is immensely useful, it is the intro itself that is useless. /nit-picking
This is a nice 3D type effect.
Pretty much useless, but I really like the idea!
Well done for implementation!
For firefox, go to tools>options>advanced and check “Use smooth scrolling”. All will be good.
Funky… I wonder what it would take to make a Street Fighter 2 style parallax effect?
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. :)
Well it works like crap in Opera 9.10
and Opera is more compliant than FirePox.
Very slow in firefox on my office pc. :(
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.
The parallax effect is definitely the wrong way round.
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. =(
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