Can someone please explain to me what this technique is called?

[buddhapanda]

Hi,

I’ve been searching for a few hours now, but I can’t find a common name for the technique used on the following site: https://willstanley.co.

I don’t mean the background with the floating dust specs (although I would love to learn more about it), but the fact that each ‘canvas’ (?) has a different background color and the ‘canvas’ seems to adapt to the height and width of the browser window.

Could someone be so kind to let me know what this technique is called? Much obliged!

[Paulie_D]

It’s called parallax scrolling

[buddhapanda]

Thanks for the answer! I suspected something like that, but I was under the impression that parallax scrolling had something to do with images loading on different speeds?

[Shikkediel]

All I really see is a basic responsive design…
The parallax effect is mostly about moving different layers of images at different speeds, usually animated while the user is scrolling.

[shaneisme]

images loading on different speeds

You might be thinking of lazy loading? The image won’t download until the browser can see it.

[nixnerd]

It’s called parallax scrolling

This is actually not technically parallax scrolling at all. It’s merely an animated background in the ilk of live wallpapers on Android. Looks like canvas was used.

As @Shikkediel indicated, parallax is the phenomenon of things in the foreground and things in the background moving at different speeds. Parallax can be emulated on a 2d screen, which results in forced perspective.

This is parallax:

[nixnerd]

To revisit this briefly… I guess you could say that the particles are parallax because they do indeed move at different speeds. But, it’s not parallax scrolling because no element of the DOM is directly tied to scroll position.

[__]

To revisit this briefly

…from two minutes ago : p

But, it’s not parallax scrolling because no element of the DOM is directly tied to scroll position.

If you’re trying to learn about it, this is key. If you study “parallax scrolling,” what you learn is going to be different that what you’re looking at here, and it might be confusing. TBC, I’d say learn about parallax scrolling (proper), because it will be more widely usable, and more flexible, in the long run.

[buddhapanda]

Hmz I’m getting confused here. What I mean is that when I scroll down the page the background color is different. It goes from gray to babyblue to white to some other blue. If I re-size my browser window the background adapts to that. I was wondering how that works?

And thanks all for the replies :)

[Paulie_D]

If you study “parallax scrolling,” what you learn is going to be different that what you’re looking at here, and it might be confusing.

My bad.

What we have here, I think, is a set of divs (actually sections) for each ‘full page’ which are set to be 100% the height of the viewport.

section {
position: relative;
display: table;
margin: 0 auto;
width: 100%;
min-height: 100%;
clear: both;
padding: 0;
}

[buddhapanda]

@NIX: Thanks! Do you know of a good tutorial explaining this?

[Author]

Posts