Streaming live at 10am (PST)

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

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.

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

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.

1 Like

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