Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

Design

Posted by Gabriel E
Gabriel E
8,916 Points

How did this designer make this interactive background?

Here's a link to a designer's portfolio that greatly inspired me. http://riccardozanutta.com/ I'm currently building mine, and although it looks substantially different, a lot of little tweaks were made after seeing this awesome site. Basically, how would you make a background image that follows the mouse events like this one?

Thanks, G

1 Answer

Craig Watson
Craig Watson
27,930 Points

Hi Gabriel,

If you drop into the inspector on the site you can see it is simple in nature. Looks like when you hover the shapes-mask div your mouse position is tracked and the the svg shapes position is updated based on some calculation.

If you move your mouse up and down left and right the shapes always do the same thing so there is not random numbers being created.

If you went and grabbed the JS file from the resources tab in your inspector you could do a find in a text editor for the classes or ID's he is using on the SVG's.

Craig

Gabriel E
Gabriel E
8,916 Points

That makes sense! Thanks Craig!