▼
Streaming live at 10am (PST)

Parallax Effect


#1

Hello guys, i am looking for a parallax effect tutorial or post that can explain on how to get this effect in webflow, i know there is some links here but none of them seems to be working, for example this:

He posted this some time ago but the link he provided http://webflowcodestutorials.webflow.io/#Java takes me to another part of the website and i cannot see the information.



#2

David,

I'm interested in what type of parallax effect you're trying to achieve. I previously posted on this topic at this link: http://forum.webflow.com/t/parallax-without-code-no-copy-paste-no-custom-css-no-custom-js/13981/3

I happen to be personally in favor of first trying to use the built-in tools in webflow to at the least simulate a parallax effect though whether it's accurate to call it parallax might be debatable rather than first resorting to some custom code. In my mind, when websites are called parallax sites, different animations happen upon scrolling.

My technique is to create a div that acts as a trigger to start the various animations. This div would initially be positioned outside the viewport or outside of the page, for example, just below the page. So, you'd position that div, and then attach a scroll interaction to it (in the "Scroll Into View" section with "Affect Other Elements" checked, and then type in the name you've given to the other element. Keep clicking the plus sign button to add more scroll interactions for other element. Then, make that element do something like move down. Don't forget to reverse whatever the effect is by setting the Scroll out of view parameters.

To summarize the technique briefly, start with a section that's sized as 100vh height. You might call this section the home section. Below that, create a new section. Within that new section, place a div, probably positioned at the top of that section, you might call that the Trigger Div. When that Div scrolls into view you can have various animations occur. You can see my work-in-progress site where I'm employing this technique in the link above. Definitely let me know your thoughts on this, if you think this is a good or not good technique. And let me know if you decide to use it yourself.


#3

One of the parallax code has disappeared from my site. I'll try to fix it as soon as I can.


#4

hi thanks for your response, i found your articles for parallax hero and parallax zoom, veeery helpful you can take a look to your code here on this website im working on http://the-royal-by-seed-mobile.webflow.io/

i was wondering if there is a code fix that provides some good smoothing effects, so the div doesnt move exactly as i scroll but have this kind of ease on the movement.


#5

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