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

CSS Updating CSS Variables with JavaScript

Posted by paulscanlon
paulscanlon
Courses Plus Student 26,735 Points

Offset of 80?

Hey guys

Around 4:45, Guil uses an offset of -80 to align the ball with the cursor. Why 80 exactly, and is it 80px because thats what we multiplied by in the calc() function?

Another reason I ask is because previously when playing around with HTML5 canvas my cursor was slightly off too and I couldn't work it out for the life of me, maybe the same problem?

Thanks in advance

Paul

1 Answer

Steven Parker
Steven Parker
241,807 Points
Steven Parker
Steven Parker
241,807 Points

Well, 50 pixels offset is needed to move the point into the center of the ball because that's the ball's radius.

The other 30 account for padding added to both the html and body elements. This can be seen in the distance from the edges in the ball's initial position before any translation is applied.

I found it interesting that you can't click outside of the body area until you move the ball there, and then you can as long as the cursor is over part of the ball.

paulscanlon
paulscanlon
Courses Plus Student 26,735 Points

Cool thanks