Parallax


Web Development

Updated Aug 22nd, 2021

Be sure to see the article on the JS package to help implement.

Parallax isn’t supposed to work on mobile yet I, on a pixel 3, see it all the time on mobile.

I consider this a task I should now how to do. I also like the idea of device detection and gracefully degrading when necessary.

Here is an article that explains it’s also computationally expensive (onScroll) and can be glitchy.

Then I think of all the better things I can learn and decide to put this aside.

Here

Transform: translate3d(0, 50px, 0)

Target.style.backgroundColor=blue

Console log window.pageOffset to see scroll values

Vanilla JS

HTML/CSS/Vanilla JS

Online Tutorials published 4/15/21

Good video but watch later starting at 5m

Relax.js

Courses by design course and by Trevor C Media

React / Next JS

Using Hooks

Closure web dev and more published on August 2nd 2020

A great way to bring life to your website. People think websites with parallax scrolling make websites look more professional. Can do vertices and horizontal.

Abstract backgrounds (pages with random abstract shapes behind them) work great for parallax.

Accomplished by having items scroll at a different speed or direction.

Sonic the hedgehog game is an example.

In this example he makes the background scroll slower than the foreground. This can be a tree of using the translateY CSS property.

But we need to know how much the user has scrolled the page and we need to store this data with useState.

Get the value to store and update by adding an event listener inside a useEffect hook with empty dependency array.

We get the value with window.pageYOffset And do this inside of a handle scroll function triggered on the scroll event listener and we use a teardown function to remove the event listener when the component is unmounted.

The easiest way to affect the translate why property in the CSS is to add an inline style.

He wants to background to be 50% slower than the foreground. It also needs to be 50% higher than where it’s supposed to be.

He has a second parallel effect to some triangles in the corner

He has them stored as a separate image so you can easily do that. Copy and paste the same translate why to the triangles div And change the speed multiplier to 0.8 And note the higher the value the slower the parallax.

Values can be above one and negative.

One thing that wasn’t discussed here was how to throttle the scroll event listener function to save computer resources. Separate article for that, typically use throttle from Lodash. Also use Lodash for handling window resizing.

Cand Dev published May 8th 2020

Used a package react-parallax, only 12k weekly. There’s another package called react-scroll-parallax 17k weekly.

The video was at a slow pace so 2x speed is best.

Circle size and opacity over image changed on scroll. Also dynamic blue example and reverse direction example.

Started with create-react-app boilerplate.

Related Features

Animate on scroll, swiper carousel slider, infinite scroll, page transitions


Top