Everyone is talking about HTML5 games and how they are the future of mobile gaming, but where do you start? What is it you need to do to create a game? In short the answer is actually "not much", everything that I will be using in todays tutorial I've already covered in various different guises in my previous tutorials. We'll be using only pure JavaScript and CSS in this tutorial and the images I've used are from the PlanetCute image pack from Daniel Cook Apologies in advance, but this is a fairly length tutorial....
CSS3 introduced a novel concept, the ability to specify multiple, layered background images. This allows you to build up an image using smaller parts to create a more complex image. This feature allows you to have one single element instead of one for each image, it also means you don't have to worry about z-indexing as it is automatic. In this tutorial we'll be creating an animated header using layered background images. We're going to then apply an animation to position everything and add some interactive...
Ever noticed if you resize your browser window with Gmail open (or Asana or a host of other sites) the various elements on screen resize automatically in a smooth animation? This can be done using JavaScript or jQuery, but can also be achieved using CSS3 transitions and @media selectors. Introduction to @media selectors ... If you already have a responsive design you'll probably be familiar with @media selectors. If you're not familiar, they are essentially a way of applying specific CSS classes to...
Have you ever started filling out a form or blog post only to have your session to expire or your browser to crash losing all of your work in the process? HTML5 introduced the concept of browser storage mechanisms. HTML5 storage has the ability to store string values in either local or session variables. The localStorage variable can persists across sessions and can be of any size. This behavior is similar to a cookie, however it does not suffer from the same limitations. In this tutorial we'll be utilizing...
In HTML5 forms got a major upgrade with the addition of some simple, yet flexible validation attributes. To support these added attributes CSS3 also added several new pseudo selectors styling controls based on their validation state. Adding validation ... To illustrate the new attributes and some of the new input types, we'll be building up a simple sign up form. Every sign up form is essentially the same, you fill in your details and click submit. How many times has the form been reset on you after you've...
Last week I briefly touched on the customization possibilities of Google Maps, this week we'll be taking a more in depth look at what exactly you can customize. The options available include customization for all aspects of the map such as: Roads Points of Interest e.g. Schools, Parks and Hospitals Methods of Transport Water Landscape features e.g. Man made or Natural This covers not only custom colors, but the icons and text associated with each element. Getting Started ... This tutorial is a follow...
In this weeks tutorial we'll be creating a jQuery plugin that serves as an introduction to the HTML5 Geo-location API to request your current location. Once we have the location, we will then draw a route from there to Dublin, Ireland (or wherever you tell it to) using the Google Maps API. This could be used in a HTML5 web application or on a site to tell your customers how to get to you. Getting Started ... First of all we'll need to create our jQuery plugin wrapper. The $.extend function will allow us to provide...
How do you encourage users to stay on your site and how do you let them know about the rest of the great content you have on your site? If a user has read or is reading and article on your site, they may like to know about similar content. You could have a series of thumbnails or related articles, but why not give a specific post a little more priority? In this tutorial we'll be using jQuery to detect when the user has scrolled to or near the bottom of the article. Once they are near it, we'll display a small overlay...