Streaming live at 10am (PST)

New help creating a Parallax Header

So I just created my first full sample test site on Webflow by following a tutorial and I love how it turned out. One thing that I would like to add is parallax to the site header such as in this example: http://newstorycharity.org/

The site that I just created is this: http://affnoprototype.webflow.io/

I tried searching through the forums for something this is specific to a header but I couldn’t find something that could help me with this. There probably is something there but it was a bit overwhelming.

Can anyone help me with a simple walk through on how I could achieve a parallax effect for the header. Would really appreciate it. Thank you in advance.

Oh, it’s not a parallax, it’s a fixed background, you’re 1 click away from getting that on your site. Edit the background image of your hero section and click the “fixed” button.

http://vincent.polenordstudio.fr/snap/t5er0.jpg

1 Like

Oh wow. Thank you for helping out, for educating me too and for the quick response. Really appreciate the help.

Ha, you’re welcome, I see it works well now :smile:

Haha yes! Clearly I was eagerly waiting for it to work out. Thanks again man.

1 Like

@vincent thoughts on how to actually parallax the header? (Can you point me in the direction of some relevant forum posts :smile:?)

Not really, I’d have to search for the most relevant post on the forum so I’ll let you do it :slight_smile: I’ve only did parallax with CSS only, you can check the experiment with the rocket on my designer page, but I don’t recommend it, tedious to do, impossible to maintain, huge load of downsides. The right way is the JS way and as I haven’t tried it, I don’t know what’s easy or not. I’m honestly waiting for WF to support parallaxes to start digging into it :slight_smile: I’m concentrating on SVG things and CSS filters at the moment.

1 Like

Ahh @vincent yeah that’s been my approach too, I used simple parallax for Riaz.london (Thanks to @bartekkustra for that) but haven’t been able to find a clean solution for a background image though without using cutouts and things. I really need to get round to understanding js things better but right now am focusing on doing fun long interaction sequences.

1 Like

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