Streaming live at 10am (PST)

New help creating a Parallax Header


#1

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.


#2

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.


#3

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


#4

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


#5

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


#6

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


#7

Not really, I'd have to search for the most relevant post on the forum so I'll let you do it 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 smile I'm concentrating on SVG things and CSS filters at the moment.


#8

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.


#9

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