loader image

Got a project coming up that’s very much Swift (the bird) related. Not Taylor Swift unfortunately. And there’s been a request to have little birdies flying on and off the website at random intervals. Which is pretty cool. Can it be done they said? Sure I said!

Assuming I can get it working with the jQuery and CSS of course.

But hurrar! There she is. Flapping away. So that’s a good start.

Pretty basic methodology here – essentially a stop motion that’s using jQuery to loop a folder of PNG files round and round, while CSS keyframes throw it from right to left across the screen. There’s potentially a smarter way to do this… so if anyone has any tips, feel free to let me know. Animated GIF was the other idea on the docket – but there’s something about using animated GIFs that makes me want to cry.

But this looks like it works – the basic strategy’s there. This little swift was roughly cut out from a flight sequence video, but they were cut very quickly just so I could see if the technique would work.  So I’ll be going back to refine those keyframes and drawings next week.

We’re also going to have multiple birds doing different flight patterns, and hopefully get them to land on some objects on screen as well, which would be pretty wild! If I can get a bird to fly onto the screen, do a little loop, and then land nicely on the corner of a text box…. well, that’d be pretty sweet. Or should I say ‘tweet’? I’m sorry, it’s late on a Friday.

There’s also going to be bird song playing in the background too. Not to mention lots of fascinating information about the life of the Common Swift. Fun times.

Peace and love people.

Will x