CSS: An Expanding Circle Transition

CSS: An Expanding Circle Transition

I wanted to do a transitio neffect with the following elements: Layers with backgrounds are reveled within an expanding circle. Inside of each layer there can be a background or text as well as animation effects (eg. the shrinking number) The transition delay can be...
Color Picker

Color Picker

This colour wheel allows users to choose the braces elastics they want. It’s a fun little tool. More than that, it’s a ranking magnet. A ranking magnet? Google and others assess how long a user is on a web page. This gives people a chance to experiment...
CSS: A Filter on Parallax

CSS: A Filter on Parallax

I wanted to do a scrolling effect with the following elements: As the image scrolls down, a CSS filter is applied. In this case, it’s a black-and-white filter to wash out the colour Other options include a sepia filter, a blur filter, a zoom filter See the Pen...
CSS and Javascript effect: A Misty Reveal

CSS and Javascript effect: A Misty Reveal

I wanted to do a reveal with the following elements: It masks a region behind a layer. In this case, a PNG with some transparency On hover, it zooms and adds a blur effect to make it look misty As it zooms in, its opacity diminishes I added some JQuery code to remove...