Hover and Click Trigger For CIRCULAR Elements With jQuery

Today we want to share one possible solution to the circle hovering problem. We’ll create a plugin that will take care of the ‘mouseenter’, ‘mouseleave’ and ‘click’ events to be triggered only on the circular shape of the element and not its bounding box.

Applying a :hover pseudo-class to an element is widely known as the classic “hovering” over an element on a web page. A problem that arose with the introduction of the border-radius property is the non-realistic triggering of the hover event when entering the bounding box of the element and not just the actual visible area. This becomes extreme when we create a circle by setting the border-radius of a square to 50% (half of its outer width and height).

Today we want to share one possible solution to the circle hovering problem. We’ll create a plugin that will take care of the ‘mouseenter’, ‘mouseleave’ and ‘click’ events to be triggered only on the circular shape of the element and not its bounding box.

CIRCULAR-Elements-With-jQuery

HOW IT WORKS

In our example, we’ll be creating a circle with some kind of hover effect. The structure will simply be:

<a href="#" id="circle" class="ec-circle">
    <h3>Hovered</h3>
</a>

And the style will be the following:

.ec-circle{
    width: 420px;
    height: 420px;
    -webkit-border-radius: 210px;
    -moz-border-radius: 210px;
    border-radius: 50%;
    text-align: center;
    overflow: hidden;
    font-family:'Kelly Slab', Georgia, serif;
    background: #dda994 url(HoverClickTriggerCircle.jpg) no-repeat center center;
    box-shadow: 
        inset 0 0 1px 230px rgba(0,0,0,0.6),
        inset 0 0 0 7px #d5ad94;
    transition: box-shadow 400ms ease-in-out;
    display: block;
    outline: none;
}

Now, we will define a class for the hover effect but not a dynamic pseudo-class :hover. The idea is to apply this class then with jQuery when we enter the circular area of our element:

.ec-circle-hover{
    box-shadow: 
        inset 0 0 0 0 rgba(0,0,0,0.6),
        inset 0 0 0 20px #c18167,
        0 0 10px rgba(0,0,0,0.3);
}

Only when we have JavaScript disabled, we’ll add the pseudo-class. This style can be found in the noscript.css:

.ec-circle:hover{
    box-shadow: 
        inset 0 0 0 0 rgba(0,0,0,0.6),
        inset 0 0 0 20px #c18167,
        0 0 10px rgba(0,0,0,0.3);
}

THE JAVASCRIPT

We are going to create a simple plugin that basically “redefines” the three events mentioned earlier. We’ll make the events only applicable on the circular shape:

$.CircleEventManager            = function( options, element ) {
    this.$el = $( element );
    this._init( options );
};

$.CircleEventManager.defaults   = {
    onMouseEnter    : function() { return false },
    onMouseLeave    : function() { return false },
    onClick         : function() { return false }
};

$.CircleEventManager.prototype  = {
    _init           : function( options ) {
        this.options = $.extend( true, {}, $.CircleEventManager.defaults, options );
        // set the default cursor on the element
        this.$el.css( 'cursor', 'default' );
        this._initEvents();

    },
    _initEvents     : function() {
       var _self   = this;
       this.$el.on({
           'mouseenter.circlemouse'    : function( event ) {
               var el  = $(event.target),
               circleWidth   = el.outerWidth( true ),
               circleHeight  = el.outerHeight( true ),
               circleLeft    = el.offset().left,
               circleTop     = el.offset().top,
               circlePos     = {
                       x     : circleLeft + circleWidth / 2,
                       y     : circleTop + circleHeight / 2,
                       radius: circleWidth / 2
                   };

                // save cursor type
                var cursor  = 'default';
                if( _self.$el.css('cursor') === 'pointer' || _self.$el.is('a') )
                    cursor = 'pointer';
                el.data( 'cursor', cursor );
                el.on( 'mousemove.circlemouse', function( event ) {
                var distance    = Math.sqrt( Math.pow( event.pageX - circlePos.x, 2 ) + Math.pow( event.pageY - circlePos.y, 2 ) );

                if( !Modernizr.borderradius ) {

                  // inside element / circle
                  el.css( 'cursor', el.data('cursor') ).data( 'inside', true );
                  _self.options.onMouseEnter( _self.$el );

                 }
                 else {

                   if( distance <= circlePos.radius && !el.data('inside') ) {                       // inside element / circle                       el.css( 'cursor', el.data('cursor') ).data( 'inside', true );                       _self.options.onMouseEnter( _self.$el );                                                   }                     else if( distance > circlePos.radius && el.data('inside') ) {

                      // inside element / outside circle
                      el.css( 'cursor', 'default' ).data( 'inside', false );
                      _self.options.onMouseLeave( _self.$el );
                    }
                   }
                }); 
            },
            'mouseleave.circlemouse'    : function( event ) {
              var el  = $(event.target);
              el.off('mousemove');
               if( el.data( 'inside' ) ) {
                  el.data( 'inside', false );
                  _self.options.onMouseLeave( _self.$el );
              }
             },
            'click.circlemouse'         : function( event ) {
              // allow the click only when inside the circle
                var el  = $(event.target);
                if( !el.data( 'inside' ) )
                    return false;
                else
                    _self.options.onClick( _self.$el );
            }
        });         
    },
    destroy             : function() {     
        this.$el.unbind('.circlemouse').removeData('inside').removeData('cursor'); 
    }
}

When we enter with the mouse in the square bounding box of our circle, we bind the ‘mousemove’ event to the element and like that we can track if the distance of the mouse to the center of the element if longer than the radius. If it is, we know that we are not yet hovering the circular area of the element.

hoverTrigger
Once the distance of the mouse is shorter than the radius, we know that we entered the circle and we trigger our custom ‘mouseenter’ event.
We also only allow the click event when the mouse is inside of the circle.
In our example we will then apply our plugin to the regarding element. In our case, we are adding the hover class on ‘mouseenter’ and removing it on ‘mouseleave’.

$('#circle').circlemouse({
    onMouseEnter    : function( el ) {

        el.addClass('ec-circle-hover');

    },
    onMouseLeave    : function( el ) {

        el.removeClass('ec-circle-hover');

    },
    onClick         : function( el ) {

        alert('clicked');

    }
})

Remember that the “normal” pseudo hover class is also defined in the noscript.css which gets applied when JavaScript is disabled.

view demo

Your turn

I hope you enjoyed this article and the techniques I used. Please share your comments and questions below!

Posted by: Dhiraj kumar

Top 10 Reasons to Start Using HTML5 Right Now…

So you’re still not using HTML5, huh? I guess you probably have your reasons; it’s not fully adopted yet, it doesn’t work in IE, you don’t like users, you’re out of touch or you are just passionately in love with writing strict XHTML code. HTML5 is the revolution that the web needed and the fact is, it is the future whether you like it or not — suck it up and deal. HTML5 isn’t hard to use or understand and even though it’s not fully adopted yet, there are still plenty of reasons to start using it right now — like right after you get done reading this article.

html5-reasons

There are lots of articles touting the use of HTML5 and praising the benefits of it, yes this is another one of those. With all these articles, with Apple pushing it, with Adobe building new dev products around it, and with so many web sites devoted to it, I still talk to fellow designers and developers who haven’t or won’t adopt it for a variety of reasons. I think the main problem is, it still seems like a mysterious creature to many. To many it feels more like the jet pack or the flying car — an awesome idea that is fun to think about but still not practical in its use. Wrong, the reality is that it is extremely practical right now! It’s not the latest Mercedes concept car being towed around form car show to car show, it’s a reality and it’s not going anywhere.

In order to further demystify HTML5 and help these knuckle dragging designers and developers to jump on the bandwagon I’ve put together a top ten list of reasons why we should all be using HTML5 right now. For those that currently use HTML5 this list may not be anything new or ground breaking, but hopefully it will inspire you to share the benefits of HTML5 with others in the community. We’ll do this Letterman countdown style (minus the celebrity presenter) and start with number ten – accessibility.

10 – ACCESSIBILITY

HTML5 makes creating accessible sites easier for two main reasons: semantics and ARIA. The new (some currently available) HTML headings like <header>, <footer>, <nav>, <section>, <aside>, etc. allow screen readers to easily access content. Before, your screen readers had no way to determine what a given <div> was even if you assigned it an ID or Class. With new semantic tags screen readers can better examine the HTML document and create a better experience for those who use them.

ARIA is a W3C spec that is mainly used to assign specific “roles” to elements in an HTML document – essentially creating important landmarks on the page: header, footer, navigation or article, via role attributes. This has been well overlooked and widely under-used mostly due to the fact that it wasn’t valid, however, HTML5 will validate these attributes. Also, HTML5 will have built in roles that can’t be over-ridden making assigning roles a no brainer. For a more in depth discussion on HTML5 and ARIA please visit the WAI.

9 – VIDEO AND AUDIO SUPPORT

Forget about Flash Player and other third party media players, make your videos and audio truly accessible with the new HTML5 <video> and <audio> tags. Getting your media to play correctly has always been pretty much a nightmare, you had to use the and <object> tags and assign a huge list of parameters just to get the thing visible and working correctly. Your media tags just become these nasty, huge chunks of confusing code segments. HTML5′s video and audio tags basically treat them as images; <video src=”url”/>. But what about all those parameters like height, width and autoplay? No worries my good man, just define those attributes in the tag just like any other HTML element: <video src=”url” width=”640px” height=”380px” autoplay/>.

It’s actually that dead simple, however because old evil browsers out there don’t like our HTML5 friend, you’ll need to add a little bit more code to get them working correctly… but this code isn’t nearly as gnarly and messy as the <object> and tags:

<video poster="myvideo.jpg" controls>
 <source src="myvideo.m4v" type="video/mp4" />
 <source src="myvideo.ogg" type="video/ogg" />
</video>

Some resources worth checking out:

8 – DOCTYPE

doctype html

<!DOCTYPE html>

Yup that’s it, that is the doctype, nothing more, nothing less. Pretty simple right? No more cutting and pasting some long unreadable line of code and no more dirty head tags filled with doctype attributes. You can simply and easily type it out and be happy. The really great thing about it though, beyond the simplicity, is that it works in every browser clear back to the dreaded IE6.

7 – CLEANER CODE

If you are passionate about simple, elegant, easy to read code then HTML5 is the beast for you. HTML5 allows you to write clear and descriptive code, semantic code that allows you to easily separate meaning from style and content. Consider this typical and simple header code with navigation:

<div id="header">
<h1>Header Text</h1>
<div id="nav">
<ul>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</div>
</div>

So this code is pretty clean and simple? But with HTML5 you can clean this up even more and at the same time give your markup more meaning:

<header>
 <h1>Header Text</h1>
 <nav>
  <ul>
   <li><a href="#">Link</a></li>
   <li><a href="#">Link</a></li>
   <li><a href="#">Link</a></li>
  </ul>
 </nav>
</header>

With HTML5 you can finally cure your “divitis” and “classitis” by using semantic and HTML headers to describe your content. Previously you would generally just use div’s for every block of content than drop an id or class on it to describe its content but with the new <section>, <article>, <header>, <footer>, <aside> and <nav> tags, HTML5 allows you to code your markup cleaner as well as keep your CSS better organized and happier.

Some resources worth checking out:

6 – SMARTER STORAGE

One of the coolest things about HTML5 is the new local storage feature. It’s a little bit of a cross between regular old cookies and a client-side database. It’s better than cookies because it allows for storage across multiple windows, it has better security and performance and data will persist even after the browser is closed. Because it’s essentially a client side data base you don’t have to worry about the user deleting cookies and it is been adopted by all the popular browsers.

Local storage is great for many things, but it’s one of HTML5 tools that are making web apps possible without third party plugins. Being able to store data in the user’s browser allows you to easily create those app features like: storing user information, the ability to cache data, and the ability to load the user’s previous application state. If you are interested in getting started with local storage, check out Christian Heilmann’s great 24 Ways article from last year —Wrapping Things Nicely with HTML5 Local Storage.

Some more resources worth checking out:

5 – BETTER INTERACTIONS

Awe, we all want better interactions, we all want a more dynamic website that responds to the user and allows the user to enjoy/interact your content instead of just look at it. Enter <canvas>, the drawing HTML5 tag that allows you to do most (if not more) interactive and animated possibilities than the previous rich internet application platforms like Flash.

Beyond <canvas>, HTML5 also comes with a slew of great APIs that allow you to build a better user experience and a beefier, more dynamic web application — here’s a quick list of native APIs:

  • Drag and Drop (DnD)
  • Offline storage database
  • Browser history management
  • document editing
  • Timed media playback

For way more info on these APIs and more native interactive features of HTML5 visit HTML5Doctor.

Some resources worth checking out:

4 – GAME DEVELOPMENT

Yup, that is correct, you can develop games using HTML5′s <canvas> tag. HTML5 provides a great, mobile friendly way to develop fun, interactive games. If you’ve built Flash games before, you’ll love building HTML5 games.

Script-Tutorials has recently offered a four part series of lessons focused on HTML5 game development, head on over and check out some of the sick stuff they have created:

Some more resources worth checking out:

3 – LEGACY/CROSS BROWSER SUPPORT

modern browsers support

Your modern, popular browsers all support HTML5 (Chrome, Firefox, Safari IE9 and Opera) and the HTML5 doctype was created so that all browsers, even the really old and annoying ones, er, IE6 can use it. But just because old browsers recognize the doctype that doesn’t mean they can use all the new HTML5 tags and goodies. Fortunately, HTML5 is being built to make things easier and more cross browser friendly so in those older IE browsers that don’t like the new tags we can just simply add a Javascript shiv that will allow them to use the new elements:

<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Some resources worth checking out:

2 – MOBILE, MOBILE, MOBILE

Call it a hunch, but I think mobile technology is becoming more popular these days. I know, that is a pretty crazy assumption and some of your are probably thinking — mobile is just a fad… right. Mobile devices are taking over the world. The adoption of mobile devices continues to grow very rapidly and this means that more and more users will be using their mobile browsers to view your web site or application. HTML5 is the most mobile ready tool for developing mobile sites and apps. With Adobe announcing the death of mobile Flash, you will now count on HTML5 to do your mobile web application development.

Mobile browsers have fully adopted HTML5 so creating mobile ready projects is as easy as designing and constructing for their smaller touch screen displays — hence the popularity of Responsive Design. There are some great meta tags that also allow you to optimize for mobile:

  • Viewport: allows you to define viewport widths and zoom settings
  • Full screen browsing: IOS specific values that allow Apple devices to display in full screen mode
  • Home Screen Icons: like favicons on desktop, these icons are used to add favorites to the home screen of an IOS and Android mobile device

For more info on how to mobilize your site via HTML5, check out “Mobifying” Your HTML5 Site.

Some resources worth checking out:

1 – IT’S THE FUTURE, GET WITH IT!

The number one reason why you should start using HTML5 today is this: it’s the future, start using it now so you don’t get left behind. HTML5 is not going anywhere and as more and more elements get adopted more and more companies will start to develop in HTML5. HTML5 is essentially just HTML, it’s not scary, it’s not anything you really need to figure out or relearn — if you’re developing XHTML strict right now you are already developing in HTML5 so why not take full advantage of it’s current capability?

You really don’t have any excuses not to adopt HTML5 and begin your new love affair with it. Truly, the only real reason I prefer to use HTML5 is just to write cleaner code, all the other benefits and fun features I haven’t even really jumped into yet, but that is the great thing about it, you can just start using it right now and not even change the way you design. So, start using it right now, whether you are just simplifying and making your markup more semantic OR you are gonna build some sick new mobile game that will take over the world — who knows, maybe you can start selling stuffed animal versions of your gaming characters too.

GREAT HTML5 RESOURCES

http://html5doctor.com
http://html5rocks.com
http://html5weekly.com
http://www.remysharp.com
http://www.script-tutorials.com

Posted by: Dhiraj kumar

Animated 3D Bouncing Ball with CSS3, Html5

Hi guys! Today we are going to see another great example of how to use the power of CSS3. We will start by creating a very cool and realistic 3D ball with pure CSS3 properties, and add a little CSS3 animations for giving the ball a “bouncing” effect.

Please note: the result of this tutorial will only work as intended in browsers that support the respective CSS properties (gradient, shadow, border-radius, keyframe animation).css-3d-bouncing-ball

THE HTML

Let’s start with some very basic HTML:

<div id="ballWrapper">
     <div id="ball"></div>
     <div id="ballShadow"></div>
</div>

What we have here are 3 simple DIV elements. “#ballWrapper” is the main DIV which wraps the ball. This DIV will determine the ball’s position and height on the screen. Next, we have the “#ball” element which is the ball markup, and finally there is the “#ballShadow” which holds the ball’s shadow separately from the ball itself.

THE CSS

First, we’ll want to set a basic width and height to our ‘#ballWrapper’ DIV. It will help us position it to the center of the screen:

#ballWrapper {
    width: 140px;
    height: 300px;
    position: fixed;
    left: 50%;
    top: 50%;
    margin: -150px 0 0 -70px;
}

Note that I gave the DIV both top and left position properties of  ‘50%’, and a negative top and left margin which is calculated to be exactly half of the original height and width of the DIV. That way we can center the ball on the screen.

Next in line, let’s give our ball some styles (grow up, it’s not that funny… :])

#ball {
    width: 140px;
    height: 140px;
    border-radius: 70px;
    background: linear-gradient(top,  rgba(187,187,187,1) 0%,rgba(119,119,119,1) 99%);
    box-shadow: inset 0 -5px 15px rgba(255,255,255,0.4), 
                inset -2px -1px 40px rgba(0,0,0,0.4), 
                0 0 1px #000;   
}

We are giving the ball equal width and height and a ‘border-radius‘ property with a value of  ’70px’ (which is half of the original width and height we’ve set) so it will be a ball and not an oval shape.

Another thing you’ll notice is the background. I gave the ball’s element a linear background and 3 different box shadow levels so it would get the 3D effect. The first box shadow level is for the dark shadowing at the bottom of the ball (see image). Then, we have the second level that is responsible for the blurry glow – again, at the bottom of the ball. Finally the third level is a hardly noticeable blurry shadow behind the contours of the ball.

If you take a look at the ball you’ll notice that there is another small oval shape on top of the ball that gives it a reflection effect. Here is how I created it:

#ball::after {
    content: "";
    width: 80px; 
    height: 40px; 
    position: absolute;
    left: 30px;
    top: 10px;  
    background: linear-gradient(top,  rgba(232,232,232,1) 0%,rgba(232,232,232,1) 1%,rgba(255,255,255,0) 100%);
    border-radius: 40px / 20px; 
}

I used the CSS pseudo element ::after and gave it a linear gradient with an opacity. In addition, I’ve set the border radius to  ’40px / 20px’ so it has an oval shape.
Next, let’s handle the ball’s shadow:

#ballShadow {
    width: 60px;
    height: 75px;
    position: absolute;
    z-index: 0;
    bottom: 0;
    left: 50%;
    margin-left: -30px;
    background: rgba(20, 20, 20, .1);
    box-shadow: 0px 0 20px 35px rgba(20,20,20,.1);
    border-radius: 30px / 40px; 
}

view demo

Again, I used the same properties for centering the shadow, but this time I pinned it to the bottom of ‘#ballWrapper’. I also added a semi-transparent background to it, a fitting box shadow and a border radius.

THE BOUNCING ANIMATION

Now let’s take a look at the fun stuff…

I’ll start by adding the animation property to our ball:

#ball {
    animation: jump 1s infinite;
}

All I did was to define the animation’s name (jump), the animation’s duration (1 second) and how many times the animation will happen – in our case we use ‘infinite’ which means that it will run forever.
The animation itself:

@keyframes jump {
    0% {
        top: 0;
    }
    50% {
        top: 140px;
        height: 140px;
    }
    55% {
        top: 160px; 
        height: 120px; 
        border-radius: 70px / 60px;
    }
    65% {
        top: 120px; 
        height: 140px; 
        border-radius: 70px;
    }
    95% {
        top: 0;
    }
    100% {
        top: 0;
    }
}

So, basically what I’m doing here is to play with the ‘top’ position property of the ball.  Starting from 0, through 160 and back to 0. You’ll notice that in the middle of the animation I’m also playing with the ‘border-radius’ property – that way I handle the “impact” of the ball on the ground.

And now the ball’s shadow; first let’s add the shadow’s relevant animation property:

#ballShadow {
    animation: shrink 1s infinite;
}

I used the same values that I used with the ball, only with a different keyframes animation called shrink which looks as follows:

@-keyframes shrink {
    0% {
        bottom: 0;
        margin-left: -30px;
        width: 60px;
        height: 75px;
        background: rgba(20, 20, 20, .1);
        box-shadow: 0px 0 20px 35px rgba(20,20,20,.1);
        border-radius: 30px / 40px;
    }
    50% {
        bottom: 30px;
        margin-left: -10px;
        width: 20px;
        height: 5px;
        background: rgba(20, 20, 20, .3);
        box-shadow: 0px 0 20px 35px rgba(20,20,20,.3);
        border-radius: 20px / 20px;
    }
    100% {
        bottom: 0;
        margin-left: -30px;
        width: 60px;
        height: 75px;
        background: rgba(20, 20, 20, .1);
        box-shadow: 0px 0 20px 35px rgba(20,20,20,.1);
        border-radius: 30px / 40px;
    }
}

In the shadow’s animation I played with different properties then in the ball’s animation. In order to give it all a realistic effect when it comes to the ball’s distance from the floor, I needed to animate the shadow width, height and opacity. While the ball is close to the floor, the shadow needs to be darker and smaller. When the ball jumps up, the shadow should be lighter and bigger.

Last, but not least, let’s add the “click effect” to the ball which makes it appear as if it moves away from us when we click and hold. To achieve this effect, all we have to use is the ‘:active’ pseudo-class, add a transition and play with the CSS3 transform ‘scale’ property like this:

#ballWrapper {
    transform: scale(1);
    transition: all 5s linear 0s;
}

#ballWrapper:active {
    transform: scale(0);
}

The transition from a transform value of scale(1) to scale(0) will make it look as if the element is moving away from you.

view demo

That’s it!

I hope you enjoyed this article and if you have questions, comments, or suggestions, let me know! Thanks for reading.

Posted by: Dhiraj kumar

CSS3 Transitions Effects on Background Gradients

CSS transitions do not have any effect on background gradients. As far as I know, the thing is that something similar would be quite difficult to achieve considering the multitude of possible gradients that can be created using a color palette.

Though, there are some simple ways you can simulate smooth transitions on gradients and below you’ll see how to do that.

faking-transitions-on-gradients

Before writing this article, I was thinking this new article will hopefully be more useful to you as It contains one more extra technique that can help you faking transitions on background gradients.

So, what is this about and why would you care about transitions on gradients? The answer is very simple: just think about the situation when you’re designing some CSS3 icons/buttons. To make them look awesome, it’s almost mandatory to use shadows, rounded corners and gradients.

Read the workarounds described below and you’ll be able to greatly improve your gradient buttons, especially their :hover state.
view demo

Initial styles

For this demo, we’re using three colored boxes to whom are applied the following workarounds.

I extracted only the important styles needed and as you can see, the background-color has the most important role, as it’s the one who’s actually being transitioned here.

.boxes li{
	transition: background-color .2s ease-out;
}

.boxes .red{
	background-color: #da232a;
}

.boxes .red:hover{
	background-color: #e75f64;
}	

.boxes .green{
	background-color: #72b01a;
}

.boxes .green:hover{
	background-color: #9ed354;
}	

.boxes .blue{
	background-color: #269ce9;
}

.boxes .blue:hover{
	background-color: #70b9e8;
}

1. Background-image

Having already a transitioned background-color, you just need to set a semi transparent background using background-image and the result will be a smooth gradient transition for the element to whom these styles are applied to.

background-image: linear-gradient(top, rgba(255,255,255,.5), rgba(255,255,255,0));

2. Box-shadow

Perhaps this is a bit dirtier, but it’s still a fully working technique. Instead of a semi transparent background as above, this assume using an inset box-shadow:

box-shadow: 0 60px 50px -30px rgba(255, 255, 255, .5) inset;

view demo

Conclusion

As you can see, the workarounds above are quite simple and easy to implement. Also, the big advantage is that they don’t require any additional markup element to work.

Thanks for reading and feel free to share your thoughts!

Posted by: Dhiraj kumar

HTML5 canvas awesomeness – games roundup

HTML5 is being developed as the next major revision of HTML, the core markup language of the World Wide Web. Besides new elements like headersectionfooter, etc., the HTML5 brings you the canvas element.

The canvas is a rectangular area within you can use Javascript to draw graphics or other visual images on a web page. Although HTML5 is not a W3C recommendation yet (because of cross browsers issues), people already started to play with it, and when I say play, I mean it.

Today I’ll share with you some awesome HTML5 games demos that show the HTML5 canvas potential.

Agent 008 Ball

8ball

Z-Type

RGB Invaders

Pacman

Spy Chase

Biolab Disaster

Wolfenstein 3D

Fred Jones in Adventureland

Asteroids

Crystal Galaxy

Same Game

Final words

A common misconception is that HTML 5 can provide animation within web pages, which is totallyuntrue. Either JavaScript or CSS3 (or both) is necessary for animating HTML elements.

Posted by: Dhiraj kumar