From a design standpoint, this landing page wasn’t all that new or intriguing; however, the functionality that needed to get build out via code was a fun learning experience. A working demo can be found here.
The GIF Swap
The colouring effect of the images on user hover was created using animated GIFs. Of course, with a non-looping GIF, once it’s loaded the final frame is cached until page refresh. So, if a user hovers, the GIF would run to completion, and stop. Which means, I needed to find a way to reset the GIF and effectively clear it from the loaded cache. To solve this, I used a “reset” function that set the image source to a blank image file and then re-loaded the static non-colored JPG.
The Layering Enigma
The Pauli Exclusion Principle in Physics states that “two identical fermions cannot occupy the same quantum state simultaneously.” Objects in programming are similar, in that two divs can’t occupy the same pixels unless a programmer uses z-index parameters to allow “stacking” or “layering” of said divs.
Swapping z-index parameters seemed overly complicated to me, so I opted instead to expand and contract the adjacent divs where needed thereby creating a kind of accordion effect to create space for the areas the revealed themselves on hover. Throwing these animations/transitions into a switch case, made for a rather (I thought) elegant code solution to this particular problem.
All I can say about this is “God, bless HTML5 transitions!”