Parallax isn’t supposed to work on mobile yet I see it all the time on my phone (pixel). It may be that it is not supported across all devices. The WordPress cover block approach does not work on iOS.
I consider this a task I should now how to do. Even if it is not well supported, maybe a good idea to practice gracefully degradation.
As usual there are a few approaches. Also Vanilla JS versus React.
For example, I know the WP cover block has a “media setting” option to toggle a “fixed background.”
The implementation seems to be the image rendered as a background-image with a “.has-parallax” class added to the “wp-block-cover” class with a CSS property of background-attachment set to fixed, (mdn link here). From MDN, “The background is fixed relative to the viewport. Even if an element has a scrolling mechanism, the background doesn’t move with the element.” This has partial support for safari and safari on iOS.
Forum post here about the lack of Safari support and consideration for just ripping it out. Chris Coyier has something on it here.
Here is an article that explains it’s also computationally expensive (onScroll) and can be glitchy.
“DesignCourse” video Here
Transform: translate3d(0, 50px, 0)
Target.style.backgroundColor=blue
Console log window.pageOffset to see scroll values
“DesignCourse” had a video (here) where there was a camping SVG.
Video here.
A great way to bring life to your website. People think websites with parallax scrolling make websites look more professional. Can do vertical 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.
Video here, (need 2X playback speed for this one).
Used “create-react-app” and “react-parallax” library, only 12k weekly. There’s another package called react-scroll-parallax 17k weekly.
Circle size and opacity over image changed on scroll. Also dynamic blue example and reverse direction example.
Started with create-react-app boilerplate.
Animate on scroll, swipe-able carousel slider, infinite scroll, page transitions
React-parallax
React-Scroll-Parallax
RelexJS