Create Falling Objects in CSS3

Example of using CSS to create falling objects using absolute positioning and CSS3 animation

Snow Example

CSS

We'd had some nice comments about the Christmas theme on the site, so have decided to share the code. There is no point going over an article that is already explained very well, so here is a link to http://www.w3schools.com/css/css3_animations.asp.

There are four smaller images in the example, and two larger, they are set to move at different speeds, which tricks the eye into thinking they are closer.

You will also need to use a certain amount of maths to get the positioning and timing correct for the top, for instance the image used here is 1198x999 pixels, in a div of 300 pixels high.

The image size on screen is set to 400px wide, so the position needs to start from at least (400/1198)*999=333 pixels above the top, and move to the new height of the image plus the div height 333+300=633.

There is also an example of how to center an object when position is set to absolute. They are set to 50% left, and then the left margin is set to half the object width.

Author

I formed Claytabase in 2010 as a way of carrying on my work with SQL Server and ASP.NET. This has culminated in the Ousia Content Management System being taken from concept to one of the quickest CMS's on the market.