Hi all,
I’m wanting to recreate the background SVG overlay that’s used on this site, natively in webflow.
Essentially the idea is that colours and images will move underneath the three stripes, but obviously an SVG isn’t going to work when you get to mobile sizes.
Is there an easy way to create this effect without using vector graphics?
Thanks!
Hi Ben,
Could you link the site you’re referring to?
Thanks!
Sorry, forgot if I edited the site it would update the test link.
The link has been updated above, and the effect I’m looking to recreate is on the homepage.
I’ve attempted to recreate the white overlay on the second “Old home” page on this project, however what works okay in the designer, immediately breaks in the preview modes.
This is extremely bad UX. Just scrolling a bit made me dizzy and confused. Your website will result in a high bounce rate.
Not super helpful without any indication of what you’re referring to?
It’s worth noting this is not the final site build, but a small section of a wider site that’s being updated. This is just the easiest way for me to get across the specific question I’m asking. So there are some broken interactions etc. from the copying across from another project.
My apologies, I was referring to the background graphic (3 stripes). Although, if you add a white overlay with 95% transparency then it should be okay.
No problem. The graphic is actually only used in the hero section, the interaction that’s broken, fades it off before it hits the text below. They’ll be used only to show an image / video / softly changing background colours with the text to the right hand corner, as shown in this example.
I just need to be able to recreate that 3 stripes graphic natively in webflow with a layout that won’t break with various screen sizes.