Animated Cube Particles With Canvas
Hi my gorgeous friends of Webflow,
This cloneable was built from a Jacob Foster's project:
https://codepen.io/Alca/pen/GRyBJZX
I tweaked the code a bit to make it fully responsive and directly configurabile from your Webflow project by using attributes. 😊
Things you can customize through attributes:
- Particle color (HSL format)
- Scale factor for desktop/tablet and mobile, for better responsiveness
- Particle density
- Cube perspective
- Particle spread
- Particle velocity
Just add the corresponding attributes to the div you want to host your canvas animation in and play around with attribute values! 😁
Look for the 'hero-section__canvas-host' element inside my project to get the whole list from the Element Settings panel and don't forget to add the 'fc-canvas-host' attribute as well!
Enjoy, clone, and feel free to leave a comment!
Have an awesome Webflow journey y'all,
Francesco
P.S. Feel free to visit my YouTube channel:
https://www.youtube.com/@francescocastronuovo