Skip to Content


Public news / March 2007 / Parallax

Parallax

Parallax Backgrounds - a multi–layered javascript experiment

wow - this opens the gates to some cool experiments with some funky transparent pngs... scrolling down a page was never that cool.

permanent link 21 mar at 21:37 by schnuck

There are 4 guest comments so far.

commentat 17:36 on 22 March 2007, Ty wrote:

I can see the possibilities, like things racing past each other. The sample though, I would sooner think the browser was having trouble rendering the backgrounds and it was just plain glitchy, not that it was some effect anybody went to any trouble for. Have you noticed this on pages when certain background elements don't scroll with the page, justs looks buggy. Again, something could come of this, don't mean to sound too negative. Could negative values be used to make the backgrounds go in reverse even? It would be great for a racing site.

commentat 21:17 on 22 March 2007, schnuck wrote:

ty,

change the appropriate bits in the original code into these:

var groundparallax = calcParallax(53, -10, posY);

var cloudsparallax = calcParallax(400, -.5, posY);

and it will do what you asked for.

now, more interestingly for me, i am going to modify this to make it work horizontally.

commentat 14:26 on 23 March 2007, Ty wrote:

Hey schnuck, good catch on this one, the possibilities are just amazing. It might just call for some creativity/imagination and a stimulus known as caffiene, lol.

Small patterns with this technique are somewhat overwhelming, but with the right BG's, it would kick butt.

commentat 01:20 on 24 March 2007, Quakeulf wrote:

None of my browsers on any of my PCs managed a smooth scroll on that one, sadly. :/

I've personally been waiting for this for years now. Good to see others do something about it too.

Add a comment:

(required, non-public)

  |  Chars left: 1000

Keep the comment relevant, constructive and be polite.
A valid email address or URL to your site must be provided, or the comment might get deleted. Content seemed inappropriate or offensive may be edited and/or deleted. Avoid explicit language and words such as "sucks" and "ripoff". For more in-depth discussions use our forum. Email addresses are never displayed. Line breaks and paragraphs are automatically converted - no need to use <p> or <br/>. Quotes & apostrophes are automatically converted to smart punctuation. Be careful when copying and pasting portions of entries or other comments. The following inline HTML elements may be used: <strong><em><pre><q><blockquote><code>. All other code will get removed before posting. Don't forget to close your tags.


Search the archive

Stylegala news archive

Public news archive

News contributors


Features

Stylegala BookStore
The Stylegala BookStore has a massive archive of great books for you as a professional..
Bullet madness
Bullet madness is a list of 200 bullets, arrows and icons uploaded by our users.
CSS Reference
An alphabetical list over the most common CSS1 and CSS2 syntax and properties.

Sponsors

Logo design for $149

Advertise here