Recently I redesigned my website (cjgammon.com).
Personal sites are kind of a constant background project for me and a great way to keep exploring and learning.
I like to keep it clean with some animation and effects.
One of these effects is a subtle WebGL background animation using white and off-white semi-transparent beams.
I think this keeps the site clean while adding some visual interest without too much noise.
A key feature of the site is the hover effect applied to the projects.
You can see a codepen of one below.
See the Pen Mouseover Parallax by CJ Gammon (@cjgammon) on CodePen.
This was achieved by using a subtle parallax effect inspired by the AppleTV UI.
SVG is used to draw the images and offset their transform relative to the mouse position.
We’re drawing a shadow gradient based on the angle of the mouse from the center.
This angle and distance from center is also used to rotate the element itself in 3D space.
The result is a fun visual effect to play with particularly when a bunch of these elements are aligned in a grid.
I used gulp and webpack to build and optimize the site in a modular fashion.
Babel was also used to use the ES2015 javascript syntax giving nice class structure and other syntactic sugar.
Sass was used with compass for generating stylesheets with variables and pre-defined mixins.
Three.js was used for the WebGL rendered portion of the site and Greensock of course was used for scripted animations.
If you pay close attention, you may also notice my blog has changed recently.
This is a work in progress but I’ve switched over to jekyll from wordpress.
So expect continued development to make this space a little more interesting as well.