Parallax! Without Code. No Copy Paste. No Custom CSS. No Custom JS

I would love some feedback on this technique, including from WF staff.

http://stephens-experiment1.webflow.io

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.

2 Likes

VERY interesting. I like where you’re going with this. Great job so far :smile:

What if you slowed down the animation to something like 5000 ms? Make it super slow and subtle.

1 Like

hello, is there a chance to open this project in Designer?

1 Like

Cool stuff @elcalibano!
I’d also be interested in how you did this! :slight_smile:

Am I missing something here? All I am seeing is a section with an image BG that is fixed on scrolling?

Scroll all the way down and up again and you’ll notice a slight motion to the background on the hero :smile:

I’m not seeing anything except a bit of a jump in the mountains when I scroll back to the top, but only if I do it quickly…

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.

2 Likes

Owww, that paralax is cool! I remember that :smiley: Hope you will find the time to finish the site. Was glad to help :blush:

2 Likes

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.

Cleanup of old abandoned threads.

There are better ways to do parallax in 2017.