Book Image

jQuery 2.0 Animation Techniques: Beginner's Guide - Second Edition

Book Image

jQuery 2.0 Animation Techniques: Beginner's Guide - Second Edition

Overview of this book

jQuery is a cross-browser JavaScript library designed to simplify the client-side scripting of HTML, and is the most popular JavaScript library in use today. Using the features offered by jQuery, developers are able to create dynamic web pages. jQuery empowers you with creating simple as well as complex animations. jQuery 2.0 Animation Techniques Beginner's Guide will teach you to understand animation in jQuery to produce slick and attractive interfaces that respond to your visitors' interactions. You will learn everything you need to know about creating engaging and effective web page animations using jQuery. In jQuery 2.0 Animation Techniques Beginner's Guide, each chapter starts with simple concepts that enable you to build, style, and code your way into creating beautifully engaging and interactive user interfaces. With the use of wide range of examples, this book will teach you how to create a range of animations, from subtle UI effects (such as form validation animation and image resizing) to completely custom plugins (such as image slideshows and parallax background animations). The book provides various examples that gradually build up your knowledge and practical experience in using the jQuery API to create stunning animations. The book uses many examples and explains how to create animations using an easy and step-by-step approach.
Table of Contents (18 chapters)
jQuery 2.0 Animation Techniques Beginner's Guide
Credits
About the Authors
About the Reviewers
www.PacktPub.com
Preface
Index

Animation on the Web


In 1989, CompuServe released GIF89a, an enhanced version of the popular GIF image format, which allowed a sequence of frames to be stored as a single image and played by supporting software.

The GIF format was already popular on what passed for the Internet in those days (remember, the World Wide Web didn't even exist until 1991) due to its small file size, lossless compression, and wide support. The enhanced version which allowed animations that anyone could create themselves, provided they had supporting software, quickly became popular.

In addition to animated GIFs, browser vendors added support for proprietary HTML elements that handled animation natively, such as the <blink> and <marquee> elements, which added different animated effects to text.

Neither of these elements was particularly attractive or successful, and the W3C, as well as leading industry accessibility and usability experts advised against their use in most cases. Different browsers at that time supported one or the other of these elements, but not both. Both elements were added by their respective vendors as part of the original browser wars.

In the late 1990s, popular browsers added support for a technique known as Dynamic HTML (DHTML), which allowed scripting languages to modify the contents of a page after the page had loaded. DHTML wasn't any single technology, but rather a collection of techniques (JavaScript, CSS, DOM, and so on) that worked together to enable a basic level of interactivity and/or animation.

In fact, DHTML made it possible to create quite advanced animations, but restrictions in the early implementations of the required technologies, as well as hugely varying browser support made DHTML tricky at best.

This era also saw the release and the rise of Flash (and Shockwave, a competing technology that was eventually subsumed by Macromedia—which was later acquired by Adobe in 2005), a vector and raster graphics format that allowed audio and video streaming, frame-by-frame animation, and a host of other features. Flash quickly became popular, and at the time of writing is still the number one format for web-based video, browser-based gaming, and advertising.

Gradual standardization of the DOM across (most) browsers, as well as the rise of JavaScript libraries such as jQuery, which abstracted away the differences that remained between browsers, have opened up animation to a much wider range of people than ever before. The term DHTML isn't often used these days because of its connotations with poor support between browsers, but the underlying principles and techniques that drive many interactive and animated sites remain similar.

Today, in addition to the animations made plausible and accessible by JavaScript libraries, we have much newer and much more exciting possibilities with CSS3 and native HTML elements such as the <canvas> element, which provides complete pixel-level control over an area of the page. We'll be looking at some CSS3 animation techniques, as well as the <canvas> element in more detail towards the end of the book. Flash-based animation is on the decline for the first time this century, and new technologies are poised on the horizon.