Add a bouncing snowman to your page simply by cloning the stylesheet at github.com/battlesnake/snowman or by including the following tag:
<link rel="stylesheet" type="text/css" href="https://hackology.co.uk/snowman/snowman.css">
A snowman is added to any element with the class “snowman”. The element is fixed to the bottom of its parent, so they work best when snowman is applied to direct descendants of the body element.
Why not also try my pointless fish.js script?
I saw a rotating blinds -style advert outside a fuel station and figured that it would be a flashy way to show a set of images on a web page. The demo is available here, and the source (including a generator shell script) is available in a github repository. This animation uses pure HTML/CSS3 – forget outdated stuff like Flash, there isn’t even any JavaScript in use for this demo!
I may use some variation of this for the images in the gallery viewers over at Kuckian Arts, once more importants tasks for that site have been completed…
You can also trigger the animation via on-mouse-over / on-mouse-leave by using the :hover pseudoclass, the animation direction specifiers, and a single iteration of the animation rather than “infinite” as it currently does. Thanks to CSS3, making those changes is incredibly easy for anyone who wants to.