Parallax catering website

I’ve been using Webflow since the day it was released. Over the last 4 to 5 months I’ve been gradually working on my dream site and now it’s ready! Yay. All thanks to an awesome tool, called Webflow.

Each section is set out to be unique, colour wise with its own background. When you scroll the clouds overcast the section to reveal the next one.

For those want to know more about our business. We are Al Enam, London based Middle Eastern caterers and food manufacturers.

Check out my site Al Enam

4 Likes

Super nice. Great work.

Awesome site @Thomas! Food looks really good too, now I’m hungry…

@Thomas Fantastic design. Congrats!

Thanks guys, much appreciated

Love the transparent cloud hovering over the fixed backgrounds. Really creative!

Wow, awesome work!

One quick tip: there are some paragraphs on your site that have some funky comments in the code that look something like this:

/* Font Definitions */ @font-face etc…

This comes from copy-pasting content from Word, and we made a fix to our copy-paste algorithm to strip this out a little while ago. You must have copy pasted before we pushed that fix. A quick way to fix that is to create a new paragraph right after the affected one, then copy paste the text into the new one, and delete the old one.

Thanks @callmevlad.

Aha, I was wondering why those comments appear in the source - thanks for the heads up.

1 Like

I want to make something simillar to my website, i’m talking about the parallax effect.
Can you elaborate how you did it?
Thank you.

Just to make sure people know what this trend really means…

Parallax is when different layers are all moving at the same time but at different speeds. Example: Parallax Scrolling Tutorial

Its like when you’re riding in a car and looking out the window. The mountains in the background will be moving slower than the objects nearest you to give you a sense of depth. But all objects in view are moving. Not one object is “fixed”

The website that is showing above is just using a mixture of “background-attachment”. One div will have background-attachment:fixed (http://www.w3schools.com/cssref/pr_background-attachment.asp) and the other will have auto or scroll.

This is a common misconception.

Hope this clears things up for everyone. =)

Can you guide me on how to make this simple parallax effect in webflow if you have some spare time?

Thank you

You should go watch the tutorial videos from the link in the upper right of this page. They will show you everything you need to know. The only thing necessary to get this effect is to choose a large background image and choose fixed in the preferences.

1 Like

COOL i just tried it, never thought it would be so easy, thank you mate!

The site is prety good, but it has no parallax effect… :confused: but it is a great great design