/    Sign up×
Community /Pin to ProfileBookmark

Parallax Scrolling

Copy linkTweet thisAlerts:
Jul 21.2008

Hey.

I have one question: Is it possible to create parallax scrolling effect using divs? I know about the one using jquerry, but from the homepage I get that’s only for use with backgrounds. Is it possible to be made with javascript so that one div is closer to “me” (the user) and another one is deeper in the screen. And when I move the mouse the camera should follow it so that the closer divs move faster and the once that are deeper move slower, since they’re farther. And when one clicks on a layer, the camera moves closer to it so that the text can be red and the links become active and so on.

I’ve searched the web for so long. It’ll be great if you can tell me whether I can find a thing like this or not.

See the example here:
[url]http://thebeatles.com/hub/love/site/[/url]
That’s flash and it’s useless to me. But mainly, that’s what I’m looking for. Only in javascipt.

to post a comment
JavaScript

5 Comments(s) ↴

Copy linkTweet thisAlerts:
@KorJul 21.2008 — Yes it is possible. But the main problem in HTML/CSS/Javascript is that you should work with transparent GIF elements, if other shape than square. So that it will be a 100% graphical problem to be solved. I hope you are familiarized with the design tools techniques (let's say Photoshop) in order to follow the below:

The transparency (margin transparency) should be set for a certain outer color (matte = color to blend transparent pixels against), but when you move a transparent image over a space (other image) with other color than the first one transparency matte color, a pixelated glow will be seen.

But let's say that the colors are closed and that glow is hardly to be seen. Now arises another problem. Unlike Flash, the HTML space is not a vectorized design space , it a pixel-by-pixel space. That means: when you magnify a picture you simply increase it's size (digital magnify), thus the image will be pixelated and distorted. Backwards, when decreasing the size, the image will become unpleasantly blurred.

How did you think to bypass these graphical problems? Because afterward the javascript code could be relative simple.
Copy linkTweet thisAlerts:
@GueztauthorJul 21.2008 — Yes it is possible. ...[/QUOTE]

I'm familiar with all the things you said. But the pixelating problem could be avoided. Let's say you have 5 different layers - 5 different distances to different blocks. The most near one is the default - where a text sized 5 px per instance is actually 5px. The second distant block will be smaller because is farther. the third is even smaller and so on.

So the when you click on the second block the first will have to zoom in in order to get closer to the second block. Therefore it'll pixelate as you say. But how about despite zooming in and pixelating it fades out lightly from starting to zoom. And perhaps it'll be 100% invisible once it gets 110% of it's size. 10% zooming is really little to pixelate that much. besides it'll hapen so fast that one could not be able to actually see the pixelating as little as it is.

How about that?
Copy linkTweet thisAlerts:
@KorJul 21.2008 — See [B]Fang[/B]'s link. Looks like an already written parallax effect code down there. I guess the rest of the code (onclick &) could be added easy enough.
Copy linkTweet thisAlerts:
@GueztauthorJul 21.2008 — yeah ? thanks guys!!!
×

Success!

Help @Guezt spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...