?

Log in

No account? Create an account
background-attachment: parallax - brad's life — LiveJournal [entries|archive|friends|userinfo]
Brad Fitzpatrick

[ website | bradfitz.com ]
[ userinfo | livejournal userinfo ]
[ archive | journal archive ]

background-attachment: parallax [Dec. 22nd, 2002|07:36 pm]
Brad Fitzpatrick
CSS defines background-attachment which can be scroll or fixed.

I want:
BODY {
  background-image: url(something.jpg);
  background-attachment: parallax;
  background-parallax-ratio: 0.5;
}
(I want my background image to scroll at some ratio of the speed of the text.)

I bet this could be accomplished with some DHTML ... connect document.onScroll to some code which modifies the repeated background vertical offset to (vert_scroll * ratio % image_height) or something.

Somebody make this for me and I'll buy you a present. I have no practical use for it, but I want to see it....

I thought I found it, but this doesn't seem to be it:

http://www.geekcomix.com/snh/files/demos/css-trans/window.html

It doesn't work in Mozilla or IE, nor is it what I want, even if it did work.
LinkReply

Comments:
[User Picture]From: perpetualmotion
2002-12-22 07:53 pm (UTC)

Awyeah.

And I want that with different layers so that my journal looks like a shoot-em-up arcade game from the 80s. And fries with that please.
(Reply) (Thread)
[User Picture]From: nolegs
2002-12-22 07:54 pm (UTC)
Dude, before I do it I need to know what kind of present.

...Can I move into your house?
(Reply) (Thread)
[User Picture]From: mart
2002-12-23 12:05 am (UTC)

That sounds like a challenge. I wish my 'DHTML' knowledge wasn't stuck in the IE3 era, because I might just have to do that, and it'll take a long time!

I think I'll manage hold off until I've done three S2 layouts, however.

(Reply) (Thread)
[User Picture]From: supersat
2002-12-23 05:11 pm (UTC)
I don't think there's a way in DHTML to determine how far an object is scrolled. I think the most you can do is tell if an object HAS been scrolled and in what direction.
(Reply) (Thread)