Skip to content

Instantly share code, notes, and snippets.

@unyo
Created March 20, 2019 09:40
Show Gist options
  • Save unyo/66d8de9e0099a8c6f56f78906a86ea28 to your computer and use it in GitHub Desktop.
Save unyo/66d8de9e0099a8c6f56f78906a86ea28 to your computer and use it in GitHub Desktop.
CSS Parallax
https://keithclark.co.uk/articles/pure-css-parallax-websites/demo1/
Basically, the idea is:
Top-level page container element (contains navbar body footer, the level which the main scrollbar will be) requires:
#___gatsby {
perspective: 1px;
overflow: auto;
height: 100%;
}
perspective: 1px is required - without it, the background image is just scaled 2x
overflow: auto is required - without it, the background image is located at the correct Y-offset but does not scroll at a different rate.
height: 100% is required - without it, the image has an incorrect Y-offset and does not scroll at a different rate
From there, you should basically have a Container with an absolutely positioned background div and content div:
.Container {
position: relative;
overflow: hidden;
}
.ImgContainer {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
transform: translate(-1px) scale(2); // you may need to adjust scale to fit, for some reason 2.01 works best for my images
}
.Content {
position: relative;
z-index: 2;
}
@unyo
Copy link
Author

unyo commented Mar 20, 2019

I keep having to relearn parallax and the quirks of perspective, so writing it down in the hopes of remembering.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment