Vertical Parallax with CSS only in Webflow

A little experiment you can clone, vertical parallax using only Webflow and a few lines of custom CSS. No JS, all SVG images. You can find this page in my usual sandbox too.

http://css-parallax.webflow.io/

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

6 Likes

Sweet! This is a nice one Vinnie!

1 Like

Very cool approach using 3D transform. Really great example, artwork and tutorial @vincent - awesome and easy to follow! enabling overflow-x: auto is a pretty cool effect also, but I guess you would have to use some compensation for alignment or size for the pan. Will be very fun to play with. Thanks for putting it together - impressive project and tutorial.

1 Like

You can’t see the grin on my face. There’s a strong possibility tweaking this will drive you insane :slight_smile: I recommend you don’t play too much with my version because honestly, I don’t remember all I did to be able to deliver the page… rather start dirdctly with the Codepen. To deliver this I tried two other methods… everytime it’s a hell to fight with the lenght of the page. I’m confident now that vertical parallax is really a JS thing (: i’m goind to reproduce that using JS, I think.

Hey thanks for the kind workds (: I didn’t produce the vectors, I quickly bought the compo on Envato because I felt it was the good thing to do for a nice example (:

1 Like

LOL, no kidding! This is one of those cases where in the future being able to view live custom CSS (or JS) in Webflow will make this tedium super simple and interactive. In those rare cases where you are tweaking mind numbing values like offsets and scale, try dialing in the numbers in chrome explorer - super easy and pseudo interactive. You will have to write down or copy and paste to a text editor, but way better than republish / disappoint / republish / disappoint / republish / disappoint / jab out eyes / wish for death / republish / repeat

JS is no picnic in this case either :slight_smile:

Here I could at least achieve the same design and object placements in Webflow and published page, but it’s a cheat. For every layer, I’ve been custom coding a translateY value to counter a vertical displacement. And as far as I calculated, I couldn’t guess the offset.

Webflow is great in the sense that you can try a lot of combinations of settings, quickly. Especially regarding display, float and position properties. It’s not tedious so you finally achieve what you wanted to do. I admit that when I was coding CSS by hand, I wasn’t even trying certain things because of a very time consuming workflow.

And now that I look at the code that Webflow produces more often, I can say that Webflow writed better code than me, I’m super ashamed.

1 Like

In some of the JS libraries I have been playing with they have created an pin or origin point which is a help. It is still disorienting and tough though. Kind of like you are swimming in space with nothing to grab onto. It is a pretty crude form of 3D. 3D apps use an interactive point of rotation for quick and sophisticated camera controls that will reorient to a point in the environment or centered on an object and calc all of the offsets in reverse. Without them you feel really lost and end up scrubbing values for days like you are trapped in an huge 3D etch-a-sketch.

Totally agree on Webflow, I will never go back. Sorry if that sounded like bitching in the previous - is really not. Most of the actual production code I look at now from other devs feels pretty clumsy, hacky and nonsensical and I know everything I tried before was absolutely hacked and busted. Webflow helps you to explore structure and iterate so quickly that everything else pales. It has unlocked so much for me helping me to understand and discover arrays of options. It is only going to grow from here. I find myself wishing for many of these features in graphics apps.

About vertical parallaxes: it’s a hard task.

First people don’t realize it’s hard to conceive. Just the graphic design part. My example showcase the most simple scenario, but there are gorgeous pages with a full story unveiling when you scroll: that is already hard to do in After Effect, creatively speaking.

Then you get to transpose that into code… and define boundaries, what you can do, what you can’t, what happen is the frame expands, shinks etc… I’ve been failing on this step more than once.

So i’m like you. Knowing that CSS isn’t the way to go, at all, and all the JS solutions around are not that easy to handle either.

So I hope @thesergie has a magic trick drafted somewhere when Webflow is ready to come up with this:

http://vincent.polenordstudio.fr/snap/303pm.jpg

Because the design of the Interactions UI is quite good, there’s room for improvement but it works great and allow us to do quite complicated stuff. So I would love to play with a well designed parallax component in Webflow, one that makes everything works out of the box. One thing I know I don’t want to deal with: my layers, there orders, their depth… if all that could be magically automatic, that would be a huge time saver.