logo
g Text Version
Beauty & Self
Books & Music
Career
Computers
Education
Family
Food & Wine
Health & Fitness
Hobbies & Crafts
Home & Garden
Money
News & Politics
Relationships
Religion & Spirituality
Sports
Travel & Culture
TV & Movies

dailyclick
Bored? Games!
Nutrition
Postcards
Take a Quiz
Rate My Photo

new
Folklore and Mythology
Baptist
Florida
Cosmetics
Distance Learning
Reading
Crochet


dailyclick
All times in EST

Full Schedule
g
g Flash and Animation Site

BellaOnline's Flash and Animation Editor

g

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

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 Del.icio.us 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


print
Printer Friendly
bookmark
Bookmark
tell friend
Tell a Friend
forum
Forum
email
Email Editor


Content copyright © 2015 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


g features
Wix Editor - Background Video

Video on Wix Websites

Wix Parallax Effect

Archives | Site Map

forum
Forum
email
Contact

Past Issues
memberscenter


vote
Poetry
Daily
Weekly
Monthly
Less than Monthly



BellaOnline on Facebook
g


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


BellaOnline Editor