Recently i challenged myself again to do something cool for one of my webdesign clients. This post updates follows the progress of experiment.
As a pro in webdevelopment in the past 15 years i learned everthing is possible if we can make time to prepare creative solutions and especialy if a client has time and room to pay for it. And my personal fun is that i’m really sure things are possible with javascript because i did so many early javascript experiments while being in Art School from 1996 to 2001, javascript pioneer days.
This time my client asked their designer for a small effect like a mousetrailer so the designer asked me to see what would do best.
Offcourse, my experinece tells me such an effect only has real value for the wbesite brand if it will add an exta value to the design and the page interaction.
The basic idea: in the top section of the landingpage, with al large slider or bg-image, a small mouse trailer is visible, when the mouse leaves the top section the mousetrailer should go to a certain fixed position and stay there while the user is scrolling the page, and jump back to trailing mode when the cursor enters the top section again.
To prepare a nice mousetrailer snippet i stumbled upon a lot of cool ready-made scripts i can learn from. The cursor itself has some default options to be assigned in javascript to change the vissible icon, at electrictoolbox.com we find a nice overview where you can test the different cursor icons.
For this it might be important to know what the cursor position is in the page inside the browser window; https://nerdparadise.com/programming/javascriptmouseposition
For the trailer effect i looked for a mousetrailer code I could use to adjust to specific needs. I found and forked it on jsfiddle http://jsfiddle.net/webbouwer/nvam7eq1/
Now i also want to track the direction the mouse cursor is moving to turn and direct the trailer to follow in the right direction, i found a script to experiment with https://www.kirupa.com/html5/getting_mouse_movement_direction.htm
This experminemt is still in progress..