One of the trends for website design this year is subtle animation. What makes it subtle is that is serves a purpose on the website but doesn't make a big statement. Wix.com has several ways to add animation to your website that communicates the message of your website.

Background Video

Background video is a great way to add animation, interest and professional style to a website. A video can be placed over the webpage background or just in a header or strip on the page.

Video is especially useful for business websites. The video can be a behind the scenes view of the company giving the customer a peak inside the company or show the product in a life setting. Another example is to use video of a special occasion, such as the company booth at a business event.

Video is also great on lifestyle blogs, as you can add a color overlay to match the brand colors of the site.

Slideshow

Slideshows are great for portfolio or ecommerce sites. Use a slideshow on the home page that displays the new products in your store. Each image in the slideshow can be a clickable link to the product listing in your eStore. Other uses for slideshows are to show information, important news or the latest blog posts.

Parallax Scrolling

Parallax scrolling is becoming very popular. Basically, it uses html and css to control the speed of the background and foreground elements as the webpage scrolls. Usually, the background moves a little slower than the foreground design elements. This gives the webpage a feeling of depth.

Animated Design Elements

A few years ago, the hover effect was very popular. This was created using html and css to display different versions of the same design element, switching the versions when the cursor was placed over the element. Mostly hover effects were added to links or clickable buttons.

These hover effects are still popular but the trend has expanded to include other design elements on the page. One example is animated infographics. These graphics can tell a story in one image that would take several paragraphs of text.

Page Transitions

Page transitions can make switching between webpages a little more interesting. This can range from a subtle cross fade to horizontal and vertical slide-in transitions. However, keep in mind that some mobile devices have problems with these transitions.

Cinemagraphics

Cinemagraphics are fairly new. They are usually created from video clips but can also be made from images. The animation in these graphics are limited to a small section of the image and therefore can be used to draw attention to a topic or make a statement.

Fixed Headers

Fixed headers are not really animation, of course. But I've added the feature to our discussion, as it can be very helpful when added to a parallax scrolling site. As these sites are frequently only one page with many sections, the header links are the fastest way to move between sections. Keeping the header fixed to the top of the web browser keeps those links available as the viewer moves between sections.