Floating

I spruced up my home page, again! This time I added a parallax effect to the illustration.

I spent a fair amount of time retooling the effect to be organic, performant, and accessible. I find that having the images “drift” after moving the mouse does not add considerably to the performance cost of the animation (after optimizing), but dramatically improves the visual appeal of the home page. It also emphasizes the “floating in space” vibe I was going for.

I also wanted to avoid using an animation library just for this effect, since all of the other animations on my site were made with CSS animations. The additional overhead of something like GreenSock felt like overkill.

I tested the effect on as many platforms as I could, but please let me know if it’s jittery or slow on your machine.

As a result of the “floating” look, I also had to update the “copy email” button effect. Before, it appeared to rise out of a flat surface. Now, it makes more contextual sense since it is more plausibly floating in space. Unlike the last effect, which I heavily borrowed from Josh Comeau, this one is 100% original.

In the interest of accessibility, the parallax effect is disabled if the prefers reduced motion media query is true.