Fun Design Question:
I’m working on a project and want to include cartoon walnuts with cartoonish eyes that follow the user’s mouse cursor throughout my landing page. What would be the ideal way to achieve this?
My focus has primarily been programming php and a little js so far… so any input from designers on how you would achieve this and what I should look into would be great, Thanks!
So, I’m not a designer, and this sort of thing is definitely not my forté, but here’s one idea:
Essentially, I’m watching the mouse’s movements and getting it’s X and Y positions as a percentage of the total window. Then, I multiply that percentage by the width and height of the eyes and set the pupil’s position to that. If the mouse if 50% of the way across the screen, the pupils should be 50% of the way across the eyes. It took some tweaking to not make it look like the poor man’s eyes were rolling back in his skull, but it works.
You should be able to apply this to whatever you’re doing. The hard part will be keeping the pupils constrained and aligned to your walnut character as I imagine it’s an image being loaded rather than elements in markup. I think you’ll want your walnut to be an SVG, if you have the choice. If not, good luck!
if you are looking for the answer, go to khan academy and go to the java script animation section in computer programming. there they will explain to you how to do that
@PortableStick - Thanks for the response & Nice pen, that was my main issue after finding a js eye-mouse code, constraining the eyes to the character.
@LawGaming - Thanks, I will check that out
edit: This Khan Academy class has all the answers I need it seems, thanks everyone 