Streaming live at 10am (PST)

Dynamic Background Effect


#1

Love the dynamic background effect that is available on the Webflow CMS Landing Page (https://webflow.com/cms) and would appreciate if someone could kindly share a walk through on how to achieve the same/similar.


#2

Hi @jakerawlins, I will make a tutorial for this, is it specifically the moving icons in the background that you want to see reproduced or what?


#3

That is correct but I'd also like to know how to have them spread out across an entire section (just as in the CMS landing page where they look like they appear blurred in the background. It'd be helpful.

Thank you in advance.


#4

Hey @jakerawlins if you try right clicking on elements on windows, or control clicking on a Mac on certain elements in Chrome, you will see an option called "Inspect Element". Inspect Element is one of your best friends when it comes to learning how things work on the web. smile

So when you inspect the images, you'll see that the blurred ones are in fact, blurred images (not blurred with css) which are transforming in scale on a loop. There are tons of tutorials in this showcase of how to achieve different interactions on load: https://interactions.webflow.com/ (scroll to the bottom for video tutorials as well)

If you're looking at the the sign-up bar, that dynamic piece is accomplishable by using a looped interaction and is a little more complex. smile You can do it! Let me know if you have any questions please. smiley


#5

@Waldo_Broodryk thanks, gonna make a tutorial on it anyway smile


#6

Thank you man. Would really appreciate it.


#7

Thank you for the direction Waldo. It does help. However I'd definitely would love to get some direction when it comes to going over this with the Webflow interface hence the request for a quick walkthrough with Webflow. I actually used some of your direction on a single png element and it worked somewhat to a certain degree. But would definitely love to see how the Webflow CMS landing page was achieved. Thank you again. smile


#8

@Arthur will take great care of you wink @jakerawlins


#9