This week’s blog post is about enhancing your website to be more dynamic using current web technologies on images. For some projects, adding in a bit of movement makes the website less dull. It can create a sense of dynamism and movement without having to resort to creating a movie. It looks pretty cool and it adds value, depending on the usage.
Let us take a look at the following image:
It is a still image and it’s kind of bland and boring. Users can see the image when it’s zoomed out, but it is not moving. This image probably would look a little better if it moved a little. One way of making it move would be to create a movie and embedding the movie into the site. But creating a movie is a long and expensive process. There is also the option of creating a .GIF file, but for a large resolution, they look pretty terrible and perform poorly. It could be better!
Now let’s take a look at the following image:
This animated image was created using with just CSS3 technologies and is well supported by all major browsers. It creates a lot of value with the addition of movement. It brings the image to life, and looks kind of neat. Actual application really depends on what the goal of the project is. If it was to look cool and make stuff move, this post covers it. That image, moved very well.
If all you have is a few images that could use some simple movement, then we can add some new CSS3 animation techniques to your project today.