Another Webflow Miracle

Just finished another site which explores some of the things possible with webflow especially fixed backgrounds and PNG backgrounds.

Have a look
http://aconterum.webflow.io/

Tip:
The sun effect is done by layering a PNG with a hole in the middle on top of a container with fixed background.

6 Likes

very beautiful. GREAT JOB! =D…

Nice job! How did you make the hero viewport fit at any sized browser like Medium.com?

Nice site! But I found an issue on safari. once you enter and there are the 4 bottles, when you mouse over them and you have the zoom animation, they disappear after the animation finishes. I’m not sure why.

Brilliant work on the sun-masked-thing!

It’s a long time I want to explore these transparency effects. Your example is so good looking! Good job.

And the whole site is very nice.

Thank you for noticing that. I will try to debug and post my solution.

The “trick” here was to divide the space into thirds that equal 100% height. Like so:

  1. Created a div with a set width and centered it
  2. Added 3 divs inside and divided the space in 3
  3. Added content to each third
  4. When you resize everything stays in proportion

Hope that explains it

Cheers

4 Likes

Very smart! Thanks for sharing! :slight_smile:

Great design. Smart combination of css positioning and png’s.
Congrats!!

1 Like

Another question, Is your “center div” set at like 90% width & height? Again, thanks for sharing your technique of your gorgeous site!

Yes. Width is 47% and height is 98%