I’ve not used those methods before in any project, and if I’m honest, the last time I can recall even talking about them would be in a maths lesson during my GCSE’s – a long time ago. I had to do quite a bit of research to be able to understand what each did, but with the help of the other web developers code to reference I was able to complete my challenge.
The experiment is currently only working on Desktops as it requires some serious memory to be able to calculate the animations.
The biggest problem I came across was getting the mouse position relative to the eye container. It was all well and good getting the position of the mouse in respect to the screen, but to calculate it to be relative to an element took a bit of digging around the web and reading guides. In the end it was a combination of subtraction and addition of offsets and widths which gave me the values I needed to animate the retina in the correct way.
This experiment makes use of jQuery and is linked to the mouse, so this would obviously only work on devices that have mice.