I would love some feedback on this technique, including from WF staff.
I’ve been searching and searching the forums and documentation on how to make a parallax effect on WF, and as I mentioned to Alex in the forums, who pointed me to a tip in a video for an interaction technique, that hadn’t been used for a parallax effect but gave me a direction to go in, I’ve been dismayed that all the parallax solutions on offer had been to use custom code, pasted into WF from elsewhere. (This is specifically for a scrolling induced parallax and not for any kind of cursor interaction as in one of the examples.)
I came up with something that I think works pretty nicely, a way to create a parallax effect that’s also more than just one element, like a section with text, scrolling over a fixed image or other element.
The technique is to have an element, like a div, trigger animations on scroll, such as movement, for other elements.
What I especially like about it is that because it uses another element as the trigger, the elements that move don’t have to start offscreen, or below the viewport. They can be at the very top of the page.
If someone has done this before, I’d love to see it. I’m sure it can be further perfected. I’d love to see what anyone else does with this technique.
By the way, the main effect is not the grunge textured sections scrolling over the background image. The main effect is two of the layers in the three layer image moving towards the middle of the image upon scroll.