Parallax

Scroll at different speeds...

I know you've seen it.... The websites with the image at the top and as you scroll, it seems to stay in place and everything rides over it. If you haven't seen it, I did it on my personal website... Check it out here.

A quick google query for parallax effect is going to turn up countless results for libraries.

But why?

We'll get this down in a few lines of JavaScript, then it's just up to you to tinker with it, to get it to you liking.

let parallax1 = document.getElementById("opening")

document.addEventListener('scroll', function (e) {

var offset = window.pageYOffset;

parallax1.style.backgroundPositionY = offset * 0.7 + 'px';});

Easy enough right?