animation posts

CSS

25 Web development resources to help you create better websites

As a developer I am always on the hunt for time saving resources, anything that can save me just a few minutes of time is a great help in an already hectic schedule. Compiled here is a list of 25 resources that are bound to make your life a little bit easier. I have added different CSS3 grid systems, as well as several code generators, whether you need a button or a pattern there should be something here for everyone, I have also added some font generators, if you are having problems with your code then you will...

Create Animated Scrolling Presentation Decks Using scrolldeck.js

The scrolldeck.js library is probably one of the best ways out there to implement a scrolling presentation deck. All you have to do is build a web page with each slide as a div. It requires JQuery, Scrollorama, scrollTo, easing & scrolldeck  JS scripts to function. After linking all of the above scripts, create the slide deck on the document ready event and configure the settings as shown: $(document).ready(function() { var deck = new $.scrolldeck({ buttons: '.nav-button', slides: '.slide',...
CSS

Creating First Animations With CSS3 Using Keyframes

One of the main reasons the emergence of CSS3 has been so hotly anticipated is the fact that, in combination with HTML5, it will pose a genuine alternative to technologies such as Flash. With CSS3 and HTML5, you will ultimately be able to create animated, interactive multimedia applications that will be accessible to users regardless of whether Flash is supported in their environment - great news if you're developing Web apps for iOS or for mobile users in general. In this tutorial we will create a simple...

What Can You Do With Paper.js?

There are many JavaScript frameworks that leverage HTML5. Paper.js is one of these frameworks that uses Document Object Model (DOM) to structure objects in an easy-to-understand manner.  It offers creative and neat ways of doing lots of stuff on a Web browser that supports the <canvas> tag. It also offers a new and interesting approach to drawing vector graphics. The basic setup is shown below: <script src="js/paper.js" type="text/javascript"></script> <script src="js/main.js"...

Wrapping Your Head Around HTML5 Canvas: Part 4

If you've made it this far in the series you should have a core understand on the basics and how all of them fit together inside of Canvas. Unfortunately for you, you're used to my terribly dry sense of humor as well. Congratulations are in order though if you've stuck it out, because today we'll be diving into some of the more advanced 2D Canvas API features. To be a tad more specific I'm talking about beginning to use the animation. The animation features that we see coming out of Canvas have been referred...
Home CSS Deals HTML HTML5 Java JavaScript jQuery Miscellaneous Mobile MySQL News PHP Resources Security Snippet Tools Tutorial Web Development Web Services WordPress