Streaming live at 10am (PST)

How to create overlay with transparent shapes (circles in example)


#1

Hi all,

Would greatly appreciate if someone can explain how to achieve this:

An overlay with transparent circles and that once scrolls out of view, the site scrolls as normal.

Here is my current attempt but i know it’s wrong. The background on the first section is ‘fixed’ which would mean it doesnt scroll up once the overlay is scrolled out of view.

https://preview.webflow.com/preview/infogr8?preview=90a8e43fd6fe074f6859e6d2a4b92f07


Here is my site Read-Only: LINK
(how to share your site Read-Only link)


#2

Hey, there are a number of ways you could do this :slight_smile: But I would suggest an transparent SVG… from Photoshop, AI, Affinity, Inkscape or any other program. Because man, adding “how many rows of circle divs” that would take? I don’t think using divs is logical. Go with a large SVG inside a div, fully covered, animate it up, and you’re done.


#3

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