24th November 2024 - 14 minutes read time
I've seen lots of "our team" pages over the years, but one of the ones that stood out to me the most were those that had an interactive element to them. For me, it adds a bit of personality to the page and makes it feel more alive than a bunch of silhouettes of the directors.
I remember seeing a team page a while ago that had a number of little images of the team that looked at the mouse pointer as it moved around the page. Each face in the picture looked in all 8 directions as my mouse pointer went around the screen. This caught my interest so I had a look to see how it worked.
The page used a combination of a fixed image dimension and background positioning to show show parts of a single image. By combining this with a little bit of JavaScript the page created an interactive image without having to load lots of images. The image can also be simple as it just needs to be a square collage of 9 images, one for each direction the mouse lies in, and a central one to look straight ahead.