Simple but specific parallax scrolling question...

Question

It's a jungle of parallax scrolling tutorials out there, but I can't find the right keywords to narrow it down to what I specifically need, which is : how do I make the contents of a div scroll slightly more slowly than the rest of the page, to give the impression that said contents exist one level below (in a virtual 3D space)?

(Not fixed, not sideways, not following the mouse cursor... just a simple "scroll slower" space following the flow of the layout.)

If this can only be done with an image (and not "the contents of a div") then can it be a background image? I pretty much gave up on straight <IMG> tags altogether and switched to background references years ago.

Thanks!

BenPleysier · Accepted Answer

W_J_T wrote
I was just curious if thats what the OP is looking for, like everyone else above. :--)

Unfortunately, the atrocious behavior on Edge disqualifies it right out of the gate. I mean, there's poor performance, and then there's whatever I just saw, there.

As for what I'm looking for... I don't know how many more different ways I can describe it. Go to literally ANY Twitter profile with a cover image. See how it scrolls slightly more slowly than the rest of the page does? And does so more elegantly on Edge (and everywhere else) than that other page did?

I want to know whether or not this behavior can be applied to block element background images (so not the body tag like most parallax tutorials offer, but elements like div, span, a) and how complicated that would be. There would be several instances in the same web page, and it would only have to work vertically (the site doesn't move horizontally).

To achieve this effect, it's understood that you'd need a background image that's slightly taller than the container, so there are a few rows of pixels to reveal during upward or downward scrolling.

Have a look at paroller.js

Under S. · Answer

My bad, I thought what I was describing was more common.

Imagine my container is 500px squared, but the background is 500px x 700px (so if centered, will bleed outside the container by 100px at the top, and 100px at the bottom).

When the container is at the bottom of the viewport, the image is bottom-justified. At the top, top-justified. Centered in the middle, and proportionate to those three anchors at every other vertical point in said viewport.

I haven't dug too deep into this one because it's a commercial product and I'd rather just pick up the skill if it's simple enough, but there's an example at the top of this page.

(The slower something scrolls proportionately to the rest of the page, the further away from our eyeballs it seems.)

Most of my images are backgrounds of <a> and <div> tags (and occasionally <span> when I'm feeling frisky). If I hide the overflow, the positioning alone should be able to handle the rest, right? Would something like jQuery be needed to handle the "vertically position background according to vertical position in viewport" part?

tags (and occasionally when I'm feeling frisky). If I hide the overflow, the positioning alone should be able to handle the rest, right? Would something like jQuery be needed to handle the "vertically position background according to vertical position in viewport" part?

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded