10 HTML5 Websites with Astounding Animations

Written by Kevin Liew on 16 Mar 2016
18,078 Views • Web Design

Year 2016 is going to be a year of great websites. With all the web technologies getting stable and powerful browsers and computer, web designers and developers are pushing theirs limit. What was seem to be only possible to build with flash in the past, it've been implemented in just HTML5, CSS3 and Javascript.

When I was going through all these websites one by one, I can't help but notice a few characteristics of these website collection:

Background Music

Just like flash, to create a fully immersive experience, background music can create a right ambient quickly.

Preloader

Due to rich media content, a preloader is important to ensure all assets are loader and display it when it's needed.

Prominent and easy to navigate

All of these websites are using different styles of layouts, hence to assume users know where to go, it's important to make the navigation obvious and easy to use. Some of them added tips and guides to ensure user know where to go.

Animations

This post is all about it, you'd see subtle animations to canvas-based stunning animations. From a little detail such as button hover effect to massive animated background with mouse interaction.

They just like flash websites but much better because It's all HTML5, CSS3 and Javascript. Ready to be impressed?

Active Theory

An impressive website for a digital agency. By using canvas, you'd see the great hover effect in the welcome screen. Clicked on the menu, they will show you something out of your expectation. Try it out.

Active Theory

Fleximize

Wow, just wow. It's just like you are watching a cartoon built with web tehnologies. For the interactive part, it has built-in mini games too! A very entertaining story-telling website to promote fleximize loan for business owners.

Fleximize

Make Me Pulse 2016 Wishes

During the loading, you're immediately welcome with a loading screen with statics and heart-beating background music. A 2016 wishes website created by an Interactive Studio called Make Me Pulse. Each uplifting word such as Dream, Strive, Imagine etc is being visualised by interactive background animation.

Make Me Pulse 2016 Wishes

Publicis90

A 90th anniversary celebration website. By using high contrast colors, simple geometry shapes, dynamic shadow plus well-thought animation, they able to bring a whole new user experience in website.

Publicis90

Epicurrence

Utah 2016 conference website for creatives and pack with full on snowboarding and skiing activities. This website is built with advanced Parallax scrolling. Everything seems to be out of alignment but yet, it works so well altogether.

Epicurrence

The Grey Tales

Once loaded, you will be greeted with the nature sounds in a forest. It's a campaign website to promote elephants protection by sharing four true stories about elephants from around the world. You'd notice parallax effect and a pretty familiar drag to visit slider just like iOS. After that, you'd see a series of stunning animtions. It's a very beautiful website.

The Grey Tales

Sailing with Greenpeace

Greenpeace website has an unique navigator - You need to turn the film reel to load different section of the website. I like its "Message in a bottle" section design.

Sailing with Greenpeace

Le Dernier Gaulois

A FraceTV story telling website with beautiful illustration. I particularily like the transition effect between episodes. When you scrolling down the story, you'd notice the background seems to be "rotating" in! Definitely haven't seen anything like this before.

Le Dernier Gaulois

Do you still believe

X-Files is back and the new season has just finished. Better late than never I guess, because its website is absolutely stunning. After the long load, the site welcome you with the classic X-Files tune. A huge X which is created dynamically with Twitter mentions. It does look like a video to me but it isn't, you can interact with it. Definitely something I never seen before.

Do you still believe

Around the world in 12 Dishes

It's a fairly simple and modern recipes website with a touch of subtle animations. It's not the traditional layout to begin with and you'd see the use of vertical split layout when displaying the article. I like its color, it's refreshing and somehow "tasty".

Around the world in 12 Dishes
Join the discussion

Comments will be moderated and rel="nofollow" will be added to all links. You can wrap your coding with [code][/code] to make use of built-in syntax highlighter.