g Text Version
Beauty & Self
Books & Music
Food & Wine
Health & Fitness
Hobbies & Crafts
Home & Garden
News & Politics
Religion & Spirituality
Travel & Culture
TV & Movies

Bored? Games!
Take a Quiz
Rate My Photo

Natural Living
Folklore and Mythology
Distance Learning

All times in EST

Full Schedule
g Flash and Animation Site

BellaOnline's Flash and Animation Editor


Subtle Animation Website Trends

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. 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.


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 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.

Join us in the Animation forum. | Join us in the Digital Art forum.


Add Subtle+Animation+Website+Trends to Twitter Add Subtle+Animation+Website+Trends to Facebook Add Subtle+Animation+Website+Trends to MySpace Add Subtle+Animation+Website+Trends to Digg Subtle+Animation+Website+Trends Add Subtle+Animation+Website+Trends to Yahoo My Web Add Subtle+Animation+Website+Trends to Google Bookmarks Add Subtle+Animation+Website+Trends to Stumbleupon Add Subtle+Animation+Website+Trends to Reddit


RSS | Related Articles | Editor's Picks Articles | Top Ten Articles | Previous Features | Site Map

For FREE email updates, subscribe to the Flash and Animation Newsletter

Past Issues

Printer Friendly
tell friend
Tell a Friend
Email Editor

Content copyright © 2018 by Diane Cipollo. All rights reserved.
This content was written by Diane Cipollo. If you wish to use this content in any manner, you need written permission. Contact Diane Cipollo for details.


g features
Wix Editor - Background Video

Video on Wix Websites

Wix Parallax Effect

Archives | Site Map


Past Issues

Note: BellaOnline uses cookies to help provide a consistent user experience. Our advertisers may use cookies to help customize ads. Please contact us with any question about our cookie use.

Summertime Foods
Corn on the Cob
Burgers on the Grill
Apple Pie


| About BellaOnline | Privacy Policy | Advertising | Become an Editor |
Website copyright © 2018 Minerva WebWorks LLC. All rights reserved.

BellaOnline Editor