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

Christmas cracker animation

25th October 2017

Christmas haz the cracker, no?
Simple cracker animation with SVG snowflake page backgounds.

Gooey-drips for Halloween @ 60fps

6th October 2017

This version crops left and right as the viewport gets smaller. The SVG is generated by JavaScript and may be reused for the hover state of stamps.

Performant lazy-load technique for 2017

10th September 2017

Utilises the new Intersection Observer API. Zero jank runs at 60fps using ultra lightweight vanilla JavaScript. Images are loaded as normal under fallback conditions.

Accordian toggling methods

30th August 2017

Three different ways to toggle your accordions using methods you've not seen before.

YouTube full-width video loop as a header background

18th August 2017

Full-width YouTube video looping, with the "between videos" black frame removed. For use as a header background. Uses an SVG crosshatch overlay. Multiple videos supported, each segment configurable with start and end points. Responsive with a static for mobile.

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.