Skip to main content

Pens – code examples

A mixed bag of experiments, tests, and code related widgets I've created over on CodePen.

Mike Foskett - (update: )

Liquid ripple click effect

7th April 2017

Cooler than a penguins testicles. Liquid ripple click effect applied to social icons with a back-up animation.

Crop copy then restore via sliding drop-down

22nd January 2017

Responsively crop content copy down to a user-defined number of lines in an accessible manner. Click to fully restore content via a sliding drop-down animation.

Matching element heights

12th December 2016

A lightweight vanilla script to match heights on non-linear elements. A get-out-of-jail free card when flexbox proves too cumbersome.

Late-loaded animated gif with pause button

30th August 2016

Improve page-load performance by defering the load of a large animated gifs. Load a static jpg first, then swap across. This allows the addition of a pause button which helps to meet WCAG 2 level AA guidelines.

FAQ using ARIA attributes

19th August 2016

Semantically correct FAQ with animated show-hide accordian style. Vanilla JavaScript toggles ARIA attributes which are animated via CSS. Questions may be set open on-load or via a URI fragment.

ARIA hamburger menu

15th August 2016

WCAG 2 level AA hamburger menu with CSS animation and ARIA support.

Pens on CodePen

March 2016 –

Go to CodePen for the complete list of pens that witch I wot rote.