Stupid-awesome image float + scale with mouse proximity in p5.js

Опубликовано: 29 Октябрь 2024
на канале: Web Bae

1,422

This image gallery concept with p5.js features images that float around the screen randomly and scale up based on proximity to the cursor. As the images get closer to the cursor, they scale up, but as the distance increases, they shrink! Additionally, as the images approach the viewport borders, we'll make sure they reverse direction, such that they bounce around and I'll show you how to find tune the behavior with custom variable in Webflow.

💡 Inspo: https://www.omse.co/info

// CLONE IT
👯‍♂️ https://try.webflow.com/cloneable-is-...

// FREE resources
✂️ Code Snippet Library: https://code-snippets-sign-up.webflow...
🤝 CSS Nobody Told You About: https://www.webbae.net/css-nobody-tol...
🚗 Roadmap to learn Webflow: https://www.webbae.net/roadmap-to-lea...
🧱 Build faster with my component library: https://webbae.net/components

// Premium content
🤝 Patreon:   / webbae
🕸️ Advanced Webflow Course (201): https://www.webbae.net/product/webflo...

// GSAP Discounts
🎢 Get 10% GSAP: WEBBAE10
♣️ Creative Coding Club (My favorite GSAP lessons): https://www.creativecodingclub.com/bu...

// Connect
🙋‍♀️ Join the Discord:   / discord
🐥 Follow Me!   / webisbae

// TOPICS
Webflow
HTML canvas
CMS Collection Images
p5js loadImage function
callback functions
Javascript classes and object oriented programming
p5js preload, setup, and draw functions
loops
conditional statements
translating the coordinate space in p5.js
getting mouse position with mouseX and mouseY