Depth Parallax Help

[Desiign]

Hi there!
So, recently I saw this website…
Contact | Femme Fatale Studio
…and I loved how the text simply smoothly scrolls and goes by the images, showing a form of depth. Do you guys have any idea on how one can go about doing this? I have heard that it has something to do with parallax. If so, could someone direct me to a (preferably video) tutorial, or at least some code.

Hope I was clear enough, thanks!

[Desiign]

Any help at all? I need a solution quick.
Thanks!

[Brando (Brandon Roche)]

Different Parallax effects possible with Webflow (no custom code required)

Hello, dear Webflowers! I know that I am not the first user who tried to create and use different types of “Parallax” effect in Webflow without custom code. After we got 3D transforms feature I found out the trick how to create such effects in easier way. 1) “Simple parallax”. (I think almost everybody knows, but will repeat) Create section (or div), set background image and make background settings: fixed [image] 2) ** Parallax with background moving up on scroll"** a) Create sec…

check this out @Desiign! Some awesome parallax effects here

[Desiign]

Thanks! That does help but I can’t seem to figure out whether I can use it to get that effect in the website I linked. I like how one element scrolls faster than the other. Any ideas?

Oh and I did find the idea of the CSS Parallax very interesting, the one that Vin had made. However I would like to make it mobile compatible, so it doesn’t help too much. What I want to achieve is very similar to what Vin had made with CSS.

[Desiign]

Alright so I found some lines of code but am not sure whether I can implement them:

$(window).scroll(function () {

$(‘.twit-bird’).css({
‘top’ : -($(this).scrollTop()/3)+“px”
});

});

Does anyone know whether I can implement this, and if so how would I go about making it work. If not, does anyone have any ideas on how I can make some elements scroll slower than others? I need help very soon!

[PixelGeek (Nelson)]

you can add custom code to your webflow site. Here is how: Custom code in head and body tags | Webflow University

hope this helps

[Desiign]

Yes, I am indeed aware of that. But how will I get it to work?
I need a parallax effect similar to the website I’ve linked on top, in which some elements scroll slower than others. Do you have any idea how I can achieve this?

I have followed your tutorial on parallax, and it works spectacularly, but the problem is it’s not exactly what I want; the elements simply follow your mouse around and show some “depth”. As for my case, I want the elements to show depth whilst scrolling.

[Desiign]

Ok, I found this pure CSS Parallax and it seems to achieve what I need, so I tried to implement it through styling some divs through the custom code, with no luck… Any help?

Here’s a link to the blog:

Pure CSS Parallax Websites