Fairy lights

Fairy lights

View the fairy lights here

I wanted to have a go at making some fairy lights that blink on and off so as part of my draw a picture every day thing I drew the string of lights. I did this with Procreate on an iPad, with this app you can export as a PSD file for photoshop so it keeps transparency in the layers which was pretty crucial for this as the exported images need to be transparent PNGs.

The idea was to put the string up on the edge of an element on a web page – in the example it’s modeled by the lovely Mrs Doyle. The lights themselves are 2 images of just the glow part of the light, a bright one and a dim one (again transparent PNGs). Then I used jQuery cycle to fade in and out between them, you can adjust the speeds to get different effects. Each of the glows for lights are then positioned along the string with CSS.

To see the code go here and view source. You need to include jQuery and jQuery cycle in the header. I included jQuery easing as well, but I only used this on the bottom example with the broken light.

I think it works pretty well, it’s a pretty simple script so if you didn’t want to include jQuery cycle you could write a fade in/out script with JS pretty easily. The broken light could definitely be done better. I didn’t want to write anything specifically for it so I used a placeholder gif that’s completely transparent so jQuery cycle would still work.

Old Internet Explorer makes fading in and out really ugly so if I was to use this for anything I would disable the animation for those browsers and leave it as a static picture instead. Maybe I’ll update this with that at some point.