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.
As I noticed people commenting I wanted to reply but unfortunately I’m very busy at the moment to write at greater length, but I did want to post this link to my portfolio site which is very much a concept in progress though I haven’t had a chance to work on it too much recently. http://scindoyan1.webflow.io
The portfolio site shows the latest update to the concept of the parallax using the built-in capabilities of Webflow. The concept is that you make an invisible div that’s positioned offscreen, above the hero image, which is made of three layers. You make a scroll interaction on the div that affects different element(s), and then you just make whatever animation you want on those different elements, in this case movement, and a fade in on the sky color to create the transition to sunset. There are multiple animations attached to the one div on scroll so when it comes up from the bottom it triggers them all. You don’t need to scroll though, since I used the built-in In-page linking technique to allow clicking on navbar menu items to make the scroll happen. Click on “Design” and then “Home” to see the navigation in action. Thanks to @sabanna for figuring out one issue with resetting the animations, and last, but not least, @Waldo for supplying the one code used here. The Parallax effect is still code-free, but the custom CSS code serves one purpose only, not necessary but a good one, getting rid of the hashtag in the address bar when doing in-page linking. a pet peeve of mine. Let me know your thoughts, and if there’s anything you don’t understand.
Hope you will find the time to finish the site. Was glad to help 