Settings - JSFiddle - Code Playground

kapry's public fiddles

Flying flag effect.

This demo demonstrates how to create a flying flag effect applied on an element with image background using mostly the CSS animation plus some jQuery (less but important). The idea is to fragment the image into many flag elements (with width of 1px and applying different background-positions) and animate the top alternately with different delays. Note that this effect consume fairly much CPU usage so use it when it's really necessary and the smaler the image is, the lesser CPU usage is consumed.

Flying flag effect.

This demo demonstrates how to create a flying flag effect applied on an element with image background using mostly the CSS animation plus some jQuery (less but important). The idea is to fragment the image into many flag elements (with width of 1px and applying different background-positions) and animate the top alternately with different delays. Note that this effect consume fairly much CPU usage so use it when it's really necessary and the smaler the image is, the lesser CPU usage is consumed.