South Texas College Landing Page

STC-onScreen

HTML/CSS/Javascript

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.

STC-coloring
STC-hover
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.

STC-onScreenVideo

All I can say about this is “God, bless HTML5 transitions!”


admin

Leave a Reply

Your email address will not be published. Required fields are marked *