Search code examples
htmlcssanimationgraphicsonmouseover

How to create a website background full of moving 'nodes' that responds to mouse movements?


I need to change the background of my company's website to a graphic composed of moving 'nodes' (think tech-y networks) that also respond to mouse movements. For example, the image attached has the 'nodes' we are thinking of, but what we want to do wouldn't work with a simple image/video. It needs to be some sort of HTML and CSS code I am guessing, so that it responds to the mouse being in the vicinity and so that the 'nodes' will spread out around the mouse. I have no clue where to even start with this. This seems like more graphic design that I even know how to code, but if anyone has any ideas, links, etc. please let me know! Thank you. This is the link to the example of the node network thing.


Solution

  • I think you are looking for something like this: https://vincentgarreau.com/particles.js/

    Alternatively, there are some other options: https://greensock.com/forums/topic/17320-background-parallax-effect-on-mouse-move/

    Cool stuff! Have fun!