Here is a compilation of 47 jaw-dropping CSS3 animation demos. They demonstrate the possibilities of the CSS3 transform and transition property. Some are very useful and can be used as Javascript alternatives. Most of them are simply to look cool. In order to veiw these effects, you need a webkit browser such as Safari and Chrome (sorry to the Internet Explorer users). Enjoy!
CSS3 Clock With jQuery
Analogue Clock
3D Cube That Rotates Using Arrow Keys
Multiple 3D Cubes (Slide In/Out)
CSS3 Accordion
Auto-Scrolling Parallax
Isocube
Image Gallery
Matrix
7 Javascript-effect Alternatives Using CSS3
Image Hover Effects
Turning Coke Can (Control With Scrollbar)
3D Meninas
Polaroid Gallery
Space
Note: this one is graphic intense and takes a while to load, but the result is crazy!
HTML 5 is giving a hard time to both website designers and developers since they are finding it overwhelmingly difficult to get the hang of it. But HTML 5 is not anything new in the field ofwebsite design, it is just the upgraded version of HTML and therefore, it is a mystery why designers are still groping in the dark. HTML 5 appears more impressive, more powerful and more feature rich than its predecessor. The immense popularity of HTML 5 lies in the fact that it is ultra-light and it is blessed by Mac PC and moreover, it does not eat your bandwidth. In addition to that, HTML 5 is remarkably free from all the junk codes and that means, search engine crawlers will find them easy to crawl and that means, there will be greater chances of getting better ranking in some keywords. However, those of you who are a bit skeptical about HTML 5 and its features, we are going to present some of best example of HTML 5 and JavaScript effect that will definitely make you say Wow. So, gear up to experience a rare visual journey:
Noise Field: – This is an outstanding example that dictates the power of HTML 5. Coupled with JavaScript, this shows a brilliant example of particle motion. You can change the direction of the particle motion or you can very look of the particles by clicking your mouse over the screen.
URL: – airtightinteractive.com/demos/processing_js/noisefield08.html
Breathing Galaxies: – This is another awe-inspiring effect that is powerful enough to make you stay glued to it for a long time. The diameter and the colors changes dynamically alternatively you can click onto the interface to have some fun.
URL: – mudcu.be/labs/JS1k/BreathingGalaxies.html
Swirling Tentacles: – It flaunts a 3D look that is heartwarming. It takes different shapes automatically and the change of color looks superb. However, the only drawback is that you cannot control it. It revolves, rotates, and takes shapes automatically.
URL: – acko.net/dumpx/996b.html
Rotating Spiral:- This is a piece of art that can make you feel hypnotized if you stare at it for long. It look stunningly beautiful and spiral is resolution independent. You can make it stop, start and can even reverse the rotation at your wish.
URL: -homepage.mac.com/chriswjohnson/automatons/rotating-spiral-1.svg
Blob: – This is a delightful example that has enough ingredients in it to inspire its viewers. It shows a blob that can be thrown around or can be split. Users can drag two blobs together to merge them into one. The very concept sounds interesting. So, what are you waiting for. Just try it now.
URL:- hakim.se/experiments/html5/blob/03/
You’ve probably seen a bunch of tutorials or articles about HTML5 on design blogs recently, but didn’t try to use it because most users will not be able to view it anyway. Now to motivate you, I compiled a few HTML5 demos that should make you want to start learning this new markup.
Be aware that you may not be able to see some of the demos. To know what elements of HTML5 your browser supports, take a look at this chart.
If you only have time to watch one of the demos suggested in this article, take a look at this great slideshow by APIrocks. It is not the most spectacular demo in the list, but it gives some cool examples with explanations and code examples.
Ready to see some videos in your browser with no plugin or flash required? If so go take a look at SublimeVideo. I’m not even mentionning how gorgeous the player is or how cool the full-window functionality is.
This will probably not only blow a video in your browser, it will also blow your mind. It’s very experimental and hard to see a use for this, but it’s good to see that technical limits will be pushed.
The screenshot that you see under this text is taken from the Tetris 3D created in javascript by Ben Joffe using the HTML5 canvas element. Don’t miss his other games and demos, it’s just amazing.
Another HTML5 demo using canvas, it shows you some molecules in a rotation.
I haven’t really digging into HTML5 yet, but it’s so hot right now I can’t even avoid it. I thought it would take a while to adopt it by web community and I think Apple has play a role in it. Apple’s iPad has stimulate the acceptance of HTML5! Alright, I haven’t got an iPad yet because I think I don’t need it YET. Okay, back to HTML5, HTML5 has changed the game of web development and it’s so exciting. I have collected 10 awesome html5, css and javascript demonstrations that show you the power of them combined together!
Blob
Cute little round shape character. It uses HTML5 canvas plus javascript to create such cool animation and interactivity.
Bubble
Generate colorful bubbles using HTML5 and of course with a magic touch of javascript.
jParallax
Awesome jParallax. I have been wanted to use this in my projects, but still haven’t got the chance yet. It’s a plugin and it’s free.
Firework
Never thought we can make firework with Javascript and html5.
Canvas Photo
Create polaroid photo effect with HTML5 canvas. It also come with the export tool.
Video showcase from Apple
Apple has a sweet demonstration of video masking, scaling and changing perspective of the video.
Photo Gallery
Another awesome demonstration. You can change the layout of the photo gallery and it has a nice blur effect.
Particle Animation
Using 300 sprites to spell out the word. It’s the demonstration of canvas particle animation.
A highly addicting game now in your browser without Flash. In my case there was no loading time or lag whatsoever. I had to make myself stop playing to keep working on this list.
If you are interested in science, medication and molecules this is one cool canvas animation. The work that must have gone into this, not only the coding but the actual data.
These examples can be very intimidating but they show the full potential of canvas. Four your own website or web app canvas can be useful for a progress indication, a content loading spinner, etc. Like I said before the resources(books, code, tutorials) are still slim but growing fast.
Coke Can
This isn’t made with CSS3 nor HTML5, it’s CSS1/2! Pretty amazing concept.
The new HTML5 provides some interesting features that allow designers to enhance and boost their creativity. The new useful tags will replace many of typical div entries from code, the new canvas support allows you to create fantastic animations without using Flash, etc.
In this post I have collected 15 examples of what we can do with HTML5 and its potentials. Some of these examples work with the support of Javascript but they show how it’s easy to replace Flash with HTML5.
1. How we’ll create forms in HTML5
HTML5 contains new interesting input fields that enable us to perform our work and save much time. In this post we can study in deep the new input fields and all their features.
This video tutorial shows how to build a simple to-do list with local storage. HTML5′s local storage is a new functionality which we can save data in browsers even the browser is refreshed or closed.
This experiment, made by Hakim el Hattab, makes a wave motion rendered using the canvas element. Each bubble holds a tweet with the word water in it. Clicking on them we can read the tweets.
4. In-place editing with contentEditable property and jQuery
contentEditable property is a feature which we can change the content of HTML elements. It’s a wonderful way for user interaction with the website. jQuery editableText is plugin that allows you to convert parts of the page into editable areas, just click on them and when you finish editing click outside. If you convert an inline element (h1…h5, p ) with this script, the line breaks will be disabled.
Drag and Drop mechanism is an User Interface concept used to support copying, list reordering and the creation of link relationships. This tut provides a cross-browsing HTML5′s drag and drop examples.
This is a great slideshow to see your photos on flickr with a PS3 slideshow style with HTML5 canvas. You have only to enter your Flickr id on page and automatically the script loads your photos into the slideshow.
HTML5 introduced <video> and <audio> tags that allow to embeds video and audio files into a website without using external players. Video for Everybody! is simply a chunk of HTML code that embeds a video into a website using the HTML5 <video> element, falling back to Flash automatically, without the use of JavaScript or browser-sniffing.
Do you remember the early versions of Paint in Windows? CanvasPaint is a near pixel-perfect copy of Microsoft Paint in HTML, CSS and JavaScript, using the <canvas> tag.
Browser Ball is a fanciful example of simultaneous use of canvas and drag and drop technologies. Browser Ball attempts to allow the configuration of a seemingly endless array of continuous spaces using multiple overlapping browser windows. Within this multivariate space, users are invited to toss a beach ball both hither and yon.
Cloth Simulation is another example of HTML5′s canvas and drag and drop use. This example is a simulation of cloth movements with some interesting customizations.
A canvas based 3D engine in this example developed by LBi Lost Boys. In this script we’ll see an amazing 3D interface with random Flickr photos loaded by clicking on surface.
Another example of Canvas using in this script. Canvas Photo is a simple wall with photos where we can move, resize, add a border to images and export the result in JPG or PNG format.
Flash vs HTML5 is one of the hottest topic today , but we are not getting in the argument of which is superior to other and which is not. Flash will always be an awesome choice for rich content web applications and games same as HTML5 in developing cool animations and simple gaming applications unless some major development to be made in future years. Today we have collected 50 awesome HTML5 demos to show its potential.
Here is an amazing video that shows off the capabilities of HTML5 on Bing search engine.
With the upcoming Internet Explorer 9 Final release, (that supports HTML5) we are eager to experience the power of such interface on any mainstream web browser.
Recent Comments