Overlapping Animated GIFs
coding HTML · 2 comments · 200 words · read ~10,827 times.
Just a couple of silly experiments on a Sunday afternoon.
I think it's beautiful to overly animated GIFs on top of one another. If the topmost GIF has a transparent background it becomes hypnotic to see the synchronisity which appears to develop - akin to listening to Dark Side of the Moon while the Wizard of Oz is on the TV.
The background and foreground have differing periods of motion, which gives a rather pleasing effect.
It's also possible to overlay GIFs to use as sprites. In this example, there's an animated background image (I got bored moving the clouds!), the ? blocks are separate GIFs positioned with CSS, as are the Goomba and Mario.
If you click on the frame, you can control Mario with your left and right cursor keys.
The movement and flipping is controlled with JavaScript altering the CSS of the image. The code itself is rather trivial - and I haven't added any collision detection - but it's works fairly well. You probably wouldn't want to build an entire game this way, but it's quite fun to see what's possible with just a couple of lines of code.
Redding H. says:
Did you create these animated gifs? They're very nice
@edent says:
Nope! Click the links under the gifs to go to the original author's post.