Browsing Posts published in October, 2010

47 Amazing CSS3 Animation Demos

No comments

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

css3 clock

Analogue Clock

analogue clock

3D Cube That Rotates Using Arrow Keys

3d cube

Multiple 3D Cubes (Slide In/Out)

multiple 3d cubes

CSS3 Accordion

css3 clock

Auto-Scrolling Parallax

auto scrolling parallax

Isocube

isocube

Image Gallery

image gallery

Matrix

matrix

7 Javascript-effect Alternatives Using CSS3

javascript effect alternatives

Image Hover Effects

css3 clock

Turning Coke Can (Control With Scrollbar)

coke can

3D Meninas

3d meninas

Polaroid Gallery

polaroid gallery

Space

Note: this one is graphic intense and takes a while to load, but the result is crazy!

space

Mac Dock

css3 clock

Drop-In Modals

drop in modals

Sliding Vinyl

sliding vinyl

Zooming Polaroids

zooming polaroids

Animated Rocket

animated rocket

Poster Circle

poster circle

Morphing Cubes

morphing cubes

Falling Leaves

falling leaves

Animated Polaroid Gallery

polaroid gallery

Spotlight Cast Shadow

spotlight cast shadow

Colorful Clock

colorful clock

Lightbox Gallery (Draggable)

css3 clock

Elastic Thumbnail Menu

elastic thumbnail menu

Coverflow

coverflow

Snowflakes

snow

jQuery DJ Hero

dj hero

Dynamic Stacking Cards

stacking cards

Another Image Gallery

image gallery

Snow Stack (Control With Arrow Keys)

snow stack

Animated Pricing Column

animated pricing column

Slick jQuery Menu

slick jquery menu

CSS3

sticky notes

CSS Tabs Without Javascript

css tabs

Tab Menus Without Javascript

tab menus

SVG Fisheye Menu

fisheye menu

Dynamic Presentation Without Flash

dynamic presentation

Rotating Gallery

rotating gallery

Dropdown Menu

dropdown menu

Another Fisheye

fisheye

Frame-by-Frame Animation (Hover to Play)

css3 animation

Another Accordion

another accordion

AT-AT Walker (No Flash or Javascript)

css3 animation walker

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:

HTML 5 effect

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.

1. APIrocks HTML5 slideshow

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.

2. Sublime Video: a HTML5 video player

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.

3. Blowing up HTML5 video

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.

4. HTML5 canvas games

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.

5. Canvasmol

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.
  • Spread
  • Block based destruction of HTML5 Canvas Video

    If you think apple’s canvas video is awesome, check this out. Recommended to use webkit based browsers.

Asteroids – HTML 5 Canvas and JavaScript demo

asteroid canvas

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.

Molecule Rotation

molecule canvas

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.

3D landscape on HTML5 Canvas

3dlandscape canvas

Remembers me of the matrix, the colors and flow.

HTML5 Canvas and Audio Expression

expression canvas

Try viewing it with your browser on full screen mode.

Blob

blob canvas

Right click changes the blob and colors, a nice experiment.

Colorful Tracking and Circles

tracking canvas

According to the maker this one started as a tracking experiment, this gives you an idea of what all is possible.

HTML5 Kaleidoscope Experiment

kaleidoscope canvas

The title says it all. A full screen version with auto play would be wonderful.

Visualization

visualization canvas

This one totally reminded me of when Winamp was popular, I loved the visualizations that came with it.

Browser Ball

browser ball canvas

The most simple and inventive yet, bounce the ball in between browser windows.

Mesmerizer

mesmerizer canvas

Reacts on mouse gestures and keyboard input.

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.

05_html05

Awesome HTML 5 Websites

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.

Link

2. Learning About HTML5 Local Storage

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.

Link

3. Wave motion

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.

Link

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.

Link

5. Cross Browser HTML5 Drag and Drop

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.

Link

6. Tetris with HTML5

How much time we spent playing Tetris? Now we can play at this game online with the experiment of Bruno Garcia developed using HTML5′s Canvas.

Link

7. HTML5 presentation

Html5Rocks has created a fantastic presentation of new features using HTML5 structure, local storage and more others of these new property.

Link

8. Flickr PS3 slideshow with HTML5 canvas

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.

Link

9. Video for Everybody!

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.

Link

10. CanvasPaint

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.

Link

11. Ball Pool

Ball Pool is a great example of canvas using. This script use the mouse click and mouse drag for moving or creating other balls into the page.

Link

12. Browser Ball

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.

Link

13. Cloth Simulation

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.

Link

14. Canvas in 3D

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.

Link

15. Canvas Photo

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.

1. Tunneler

Tunneler

2. JuicyDrop

juicydrop

3. Magnetic

Magnetic

4. Trail

Trail

5. Sinuous

Sinuous q

6. DDD

DDD

7. Harmony

harmony

8. Lines go all over the place.

Lines go all over the place.

9. Chrome Canopy

Chrome Canopy

10. Ball Pool

Ball Pool

11. Chain Reaction

Chain Reaction

12. Entanglement

Entanglement

13. Blob

Blob

14. Biolab Disaster

Biolab Disaster

15. Google Gravity

Google Gravity

16. Core

Core

17. Gartic

Gartic

18. HTML5 Video Destruction

HTML5 Video Destruction

19. The tristan washing machine

the trista

20. Changing Background

Background Changing

21. HTML5 Drum Kit

HTML5 Drum Kit

22. Dynamic Content Injection

Dynamic Content Injection

23. Geolocation

Geolocation

24. Video for Everybody!

Video for Everybod

25. Projekktor Zwei

Projekktor

26. ContentEditable

ContentEditable

27. Drag and drop

Drag and drop

28. Canvas Photo

Canvas Photo

29. 360° MP3 player

360° MP3 player

30. JaVortex

JaVortex

31. 3D Model Viewer

Javascript 3D Model Viewer

32. 3D Landscape on HTML5 canvas

3D Landscape

33. Stalk Buttons

Stalk Buttons

34. JavaScript Fireworks

JavaScript Fireworks

35. Blob Sallad

Blob Sallad

36. SublimeVideo

SublimeVideo

37. Catch it!

Catch it!

38. Breakout Clone

Breakout Clone

39. Sketchpad

Sketchpad

40. Simple Drag and Drop

Simple Drag and Drop

41. CanvasPaint

CanvasPaint

42. Monster

Monster

43. Making waves with html5

making waves

44. Starfield

Starfield

45. The mesmerizer

The mesmerizer

46. Bomomo

bomomo

47. Canvas Nebula

Canvas Nebulaq

48. Liquid Particles

Liquid Particles

49. Moving Cloth in HTML5

Moving Cloth in HTML5

50. CanvasMol

CanvasMol

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.