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: )

White Noise Generator

24th June 2017

Using the Web Audio API to generate white noise and supply play, fade and stop methods with individual settings.

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.