jQuery 2.0 Animation Techniques Beginner's Guide

By Dan Wellman and Adam Culpepper

This book is a guide to help you create attractive web page animations using jQuery. Written in a friendly and engaging approach this book is designed to be placed alongside your computer as a mentor.If you are a web designer or a frontend developer or if you want to learn how to animate the user interface of your web applications with jQuery, this book is for you. Experience with jQuery or Javascript would be helpful but solid knowledge base of HTML and CSS is assumed.

• Language: English
• Publisher: Packt Publishing
• Release date: Dec 24, 2013
• ISBN: 9781782169659

Dan Wellman

Dan Wellman is an author and frontend engineer living on the south coast of the UK and working in London. By day he works for Skype and has a blast writing application-grade JavaScript. By night he writes books and tutorials focused mainly on frontend web development. He is also a staff writer for the tuts+ arm of the Envato network, and occasionally writes for .Net magazine. He's the proud father of four amazing children, and the grateful husband of a wonderful wife.

Book preview

Table of Contents

jQuery 2.0 Animation Techniques Beginner's Guide

Credits

About the Authors

About the Reviewers

www.PacktPub.com

Support files, eBooks, discount offers and more

Why Subscribe?

Free Access for Packt account holders

Preface

What this book covers

What you need for this book

Who this book is for

Conventions

Time for action – heading

What just happened?

Pop quiz – heading

Have a go hero – heading

Reader feedback

Customer support

Downloading the example code

Errata

Piracy

Questions

1. Getting Started

Animation on the Web

The power of animated UIs

When to use animations

When not to use animations

Animation checklist

Animating with jQuery

Creating the project folder

The template file

A basic animation example

Time for action – creating an animated loader

What just happened?

Have a go hero – extending the loading animation

Pop quiz – basic animation with jQuery

Summary

2. Image Animation

Image animation

Fading animations

Configuring the animations with arguments

Time for action – setting up the markup and styling

What just happened?

Pop quiz – using fadeIn()

Scripting the image slider

Time for action – scripting the image rotator

What just happened?

Pop quiz – length() and milliseconds

Time for action – extending the pause-on-hover functionality

What just happened?

Time for action – extending the previous and next link features

What just happened?

Pop quiz – preventDefault() and setInterval()

Time for action – extending the pagination functionality

What just happened?

Have a Go Hero – extending the image rotator further

Pop quiz – altering variables and zero index

Summary

3. Background Animation

Background-color animation

Introducing the animate method

Time for action – animating the body background-color

What just happened?

Chaining together jQuery methods

Have a go hero – extending our script with a loop

Pop quiz – chaining with the animate() method

The illusion of depth with parallax

Time for action – creating the stage and adding the styling

What just happened?

Time for action – animating the background position

What just happened?

Have a go hero - extending parallax

Automatic background animation

Time for action – creating an automatic background animation

What just happened?

Have a go hero – playing under the hood

Let's make it diagonal!

Time for action – animating the background diagonally

What just happened?

Have a go hero

Parallax background on page elements

Time for action – setting up the markup and styling

What just happened?

Time for action – scripting our parallax script

What just happened?

Have a go hero – customizing the speed and direction of the effect

Pop quiz – the scroll() and scrollTop() methods

Summary

4. Navigation Animation

Creating simple navigation animations

Configuring addClass() and removeClass()

Time for action – setting up our navigation

What just happened?

Have a go hero – extending our hover style

Using the stop() method

Time for action – adding the stop() method

What just happened?

Animating the window with scrollTop()

Time for action – scripting our smooth scrolling animation

What just happened?

Smooth scrolling and page background color

Time for action – creating the super animation

What just happened?

Have a go hero – extending the script further

Pop quiz – the ^ symbol and the stop() method

Summary

5. Form and Input Animation

Using simple form animations

Time for action – creating the form

What just happened?

Time for action – adding our animation styles to the form

What just happened?

Form validation animations

Time for action – basic dialog form validation

What just happened?

Have a go hero – extending our form validation

Time for action – animating form validation errors

What just happened?

Have a go hero – putting it all together

Pop quiz – form animation and jQuery UI

Summary

6. Extended Animations with jQuery UI

Obtaining and setting up jQuery UI

Creating a new template file

The new effects added by jQuery UI

Using the effect API

The bounce effect

Syntax

Configuration options

Time for action – using the bounce effect

What just happened?

The highlight effect

Syntax

Configuration options

Time for action – highlighting elements

What just happened?

The pulsate effect

Syntax

Configuration options

Time for action – making an element pulsate

What just happened?

The shake effect

Syntax

Configuration options

Time for action – shaking an element

What just happened?

The size effect

Syntax

Configuration options

Time for action – resizing elements

What just happened?

The transfer effect

Syntax

Configuration options

Time for action – transferring the outline of one element to another

What just happened?

Pop quiz – using the effect API

Using effects with the show and hide logic

The blind effect

Syntax

Configuration options

Time for action – using the blind effect

What just happened?

The clip effect

Syntax

Configuration options

Time for action – clipping an element in and out

What just happened?

The drop effect

Syntax

Configuration options

Time for action – using the effect

What just happened?

The explode effect

Syntax

Configuration options

Time for action – exploding an element

What just happened?

The fold effect

Syntax

Configuration options

Time for action – folding an element away

What just happened?

The puff effect

Syntax

Configuration options

Time for action – making an element disappear in a puff

What just happened?

The slide effect

Syntax

Configuration options

Time for action – sliding elements in and out of view

What just happened?

The scale effect

Syntax

Configuration options

Time for action – scaling an element

What just happened?

Pop quiz – using show/hide logic

Have a go hero – experimenting with the effect API

Easing functions

Time for action – adding easing to effects

What just happened?

Using an object literal to add easing

Have a go hero – using easing

Pop quiz – using easing

Animating between different colors

Time for action – animating between colors

What just happened?

Class transitions

Time for action – transitioning between classes

What just happened?

Pop quiz – easing, color, and class animations

Summary

7. Custom Animations

The animate method

Per-property easing

An alternative syntax for animate()

Animating an element's position

Time for action – creating an animated content viewer

What just happened?

Time for action – initializing variables and prepping the widget

What just happened?

Time for action – defining a post-animation callback

What just happened?

Time for action – adding event handlers for the UI elements

What just happened?

Skinning the widget

Time for action – adding a new skin

What just happened?

Pop quiz – creating an animated content-viewer

Have a go hero – making the image viewer more scalable

Animating an element's size

Time for action – creating the underlying page and basic styling

What just happened?

Time for action – defining the full and small sizes of the images

What just happened?

Time for action – creating the overlay images

What just happened?

Time for action – creating the overlay wrappers

What just happened?

Time for action – maintaining the overlay positions

What just happened?

Pop quiz – creating expanding images

Have a go hero – doing away with the hardcoded dims object

Creating a jQuery animation plugin

Time for action – creating a test page and adding some styling

What just happened?

Creating the plugin

Time for action – adding a license and defining configurable options

What just happened?

Time for action – adding our plugin method to the jQuery namespace

What just happened?

Time for action – creating the UI

What just happened?

Time for action – creating the transition overlay

What just happened?

Time for action – defining the transitions

What just happened?

Using the plugin

Pop quiz – creating a plugin

Have a go hero – extending the plugin

Summary

8. Other Popular Animations

Understanding Proximity animations

Time for action – creating and styling the page

What just happened?

Time for action – preparing the page for sliding functionality

What just happened?

Time for action – animating the scroller

What just happened?

Time for action – adding the mouse events

What just happened?

Time for action – adding keyboard events

What just happened?

Have a go hero – extending proximity animations

Pop quiz – implementing proximity animations

Animating page headers

Time for action – creating an animated header

What just happened?

Have a go hero – extending the animated header

Animating text using the marquee effect

Time for action – creating and styling the underlying page

What just happened?

Time for action – retrieving and processing the post list

What just happened?

Time for action – animating the post links

What just happened?

Have a go hero – extending the marquee scroller

Pop quiz – creating a marquee scroller

Summary

9. CSS3 Animations

CSS3 2D transforms

Understanding the matrix

Translate

Scale

Skew

Rotation

Working with transforms

Using jQuery and transforms

CSS3 3D transforms

Animated rotation with jQuery and CSS3

Time for action – animating an element's rotation

What just happened?

Problems with IE

Pop quiz – implementing CSS3 rotation

Have a go hero – extending CSS3 rotation

Animated skewing

Time for action – creating the underlying markup and basic styling

What just happened?

Time for action – initializing the widget

What just happened?

Time for action – animating an element's skew

What just happened?

Time for action – skewing an element from left to right

What just happened?

Time for action – wiring up the controls

What just happened?

Have a go hero – extending matrix animation

Pop quiz – using the matrix

Summary

10. Canvas Animations

Learning the HTMLCanvasElement interface

Using the canvas element

Understanding context methods

Native shapes

Drawing using a path

Drawing images and patterns

Text strings

Applying transformation methods

Pixel manipulation

Drawing to the canvas

Time for action – drawing to the canvas

What just happened?

Pop quiz – drawing to the canvas

Have a go hero – creating the flag of your nation

Animating the canvas

Time for action – creating an animation on the canvas

What just happened?

Time for action – animating the white crosses

What just happened?

Time for action – animating the red crosses

What just happened?

Pop quiz – animating the canvas

Have a go hero – creating canvas animations

Creating a canvas game

Time for action – creating the initial page

What just happened?

Time for action – creating the initial script

What just happened?

Time for action – adding the aliens to the page

What just happened?

Time for action – moving the aliens

What just happened?

Time for action – adding handlers to control the ship

What just happened?

Pop quiz – creating canvas-based games

Have a go hero – extending the space invaders clone

Summary

A. Pop Quiz Answers

Chapter 1, Getting Started

Pop quiz – basic animation with jQuery

Chapter 2, Image Animation

Pop quiz – using fadeIn()

Pop quiz – length() and milliseconds

Pop quiz – preventDefault() and setInterval()

Pop quiz – altering variables and zero index

Chapter 3, Background Animation

Pop quiz – chaining with the animate() method

Pop quiz – the scroll() and scrollTop() methods

Chapter 4, Navigation Animation

Pop quiz – the ^ symbol and the stop() method

Chapter 5, Form and Input Animation

Pop quiz – form animation and jQuery UI

Chapter 6, Extended Animations with jQuery UI

Pop quiz – using the effect of API

Pop quiz – using show/hide logic

Pop quiz – using easing

Pop quiz – easing, color, and class animation

Chapter 7, Custom Animations

Pop quiz – creating an animated content-viewer

Pop quiz – creating expanding images

Pop quiz – creating a plugin

Chapter 8, Other Popular Animations

Pop quiz – implementing proximity animations

Pop quiz – creating a marquee scroller

Chapter 9, CSS3 Animations

Pop quiz – implementing CSS3 rotation

Pop quiz – using the matrix

Chapter 10, Canvas Animations

Pop quiz – drawing to the canvas

Pop quiz – animating the canvas

Pop quiz – creating canvas-based games

Index

jQuery 2.0 Animation Techniques Beginner's Guide

---

jQuery 2.0 Animation Techniques Beginner's Guide

Copyright © 2013 Packt Publishing

All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews.

Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the authors, nor Packt Publishing, and its dealers and distributors will be held liable for any damages caused or alleged to be caused directly or indirectly by this book.

Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information.

First published: December 2013

Production Reference: 1171213

Published by Packt Publishing Ltd.

Livery Place

35 Livery Street

Birmingham B3 2PB, UK.

ISBN 978-1-78216-964-2

www.packtpub.com

Cover Image by Jeremy Segal (<[e-mail]>)

Credits

Authors

Adam Culpepper

Dan Wellman

Reviewers

Jeff Byrnes

Emil Lerch

Doug Sparling

Acquisition Editors

Harsha Bharwani

Akram Hussain

Lead Technical Editors

Mayur Hule

Larissa Pinto

Technical Editors

Iram Malik

Menza Mathew

Rahul U. Nair

Pratish Soman

Project Coordinator

Anugya Khurana

Proofreaders

Lauren Harkins

Elinor Perry-Smith

Indexer

Mehreen Deshmukh

Production Coordinator

Shantanu Zagade

Cover Work

Shantanu Zagade

About the Authors

Adam Culpepper is a frontend web developer who works for Envoc, a software development firm, located in Baton Rouge, Louisiana. He is very active in his community; organizing, founding, and sitting on the board of many industry-related groups and organizations in his area. When he's not reading, writing, working, organizing, or attending a community event, he's spending time with his great friends and family or his girlfriend Amber, his son Aiden and his cat Emma. Adam can be reached at his website (www.adamculpepper.net) or through Twitter (@adamculpepper).

I dedicate this book to my girlfriend, Amber, who tolerates my time spent reading, writing, and learning.

To my son Aiden and my cat Emma, who both frequently break my concentration while writing.

To my mom, who has always encouraged me to reach for my dreams (except for my childhood dream of growing up to be a puppy).

To the best damn boss in the world, Calvin Fabre.

Also, I'd like to give special thanks to the period, comma, and the semicolon. Without you guys, I would have gotten a lot more restful nights.

Dan Wellman is an author and web developer based on the South coast of the UK. By day he works alongside some of the most talented people he has had the pleasure of calling colleagues, for a small, yet accomplished digital agency called Design Haus. By night he writes books and tutorials on a range of frontend topics. He is hopelessly addicted to jQuery. His life is enriched by four wonderful children, a beautiful wife, and a close circle of family and friends. This is his fifth book.

I would like to thank the hugely supportive and patient editorial team at Packt, without whom this book would not exist. I would also like to thank the reviewers, especially Ben Nadel and Cyril Pierron, who put aside their own personal projects and dedicated countless hours to ensuring the book's technical accuracy. I'd also like to say a big Hey! to some of my closest friends, in no particular order; Andrew Herman, Steev Bishop, Aaron Matheson, Eamon O'Donoghue, James Zabiela, Mike Woodford, and John Adams.

About the Reviewers

Jeff Byrnes is a software engineer with over 8 years of experience working in web development and operations. Educated as a musician at Berklee College of Music, self-taught as an engineer, he has experience ranges from frontend to backend and systems. HTML5, CSS3, JS, PHP, Git and version control, Puppet, Chef, Vagrant, Bash, Linux, deployment, automation, and analytics; these are all the technologies and skills with which he is experienced and proficient.

Currently, part of the Operations team at EverTrue, Jeff spends his days supporting the engineering team, providing automation, server monitoring and maintenance, workflow improvements, and deployment solutions, as well as providing help desk support to the company at large.

I'd like to thank Dale Cruse for connecting me with the opportunity to assist with this book's publication, and my better half Leah for supporting me as I worked on it.

Emil Lerch is a technical architect, leading teams to build web-based systems for enterprises since 1995. He lives in Portland, Oregon with his wife Kelly and children Kathryn and Jack. His blog is http://emilsblog.lerch.org and he can be reached on twitter @elerch.

My lovely wife and children for giving me the time to help review the book.

Doug Sparling works as a web and mobile software developer for Andrews McMeel Universal, a publishing and syndication company in Kansas City, MO. As long-time employee of the company, he has built everything from the GoComics Android app to registration, ecommerce systems, web services, and various web sites using Ruby on Rails. He's now busy building another site in Rails and porting a Perl-based e-mail system to Go. Some of the AMU properties include GoComics.com, PuzzleSociety.com, Doonesbury.com, and Dilbert.com.

He is also the directory of technology for the small web development firm called New Age Graphics (newage-graphics.com). After creating a custom CMS using C# and ASP.NET, all work has moved to WordPress since WordPress 3.0 was released, eliminating the need to ever run Windows again.

Doug is the author of a popular jQuery plugin, jClock.

Doug is a passionate advocate for WordPress and has written several WordPress plugins, can be found on the WordPress.org forums answering questions (and writing sample code) under the username scriptrunner, and occasionally plays grammar nerd as a volunteer on the WordPress Codex Documentation team.

Other experience includes PHP, JavaScript, jQuery, Erlang, Python, Magento, and Perl. Doug was also the co-author for a Perl book (Instant Perl modules) and is a reviewer for other Packt books, including Mastering Android 3D Game Development and WordPress Web Application Development, as well as The Well Ground Rubyist, 2nd Edition and Learn Android in a Month of Lunches for Manning Publications.

In his less than ample spare time, Doug enjoys spending time with his family. Other passions include photography, writing music, hitting drums and cymbals with sticks, playing briscola, meditation, and watching countless reruns of Firefly, Buffy the Vampire Slayer, and Doctor Who.

Many thanks to Packt for giving me the opportunity to review a book on jQuery.

www.PacktPub.com

Support files, eBooks, discount offers and more

You might want to visit www.PacktPub.com for support files and downloads related to your book.

Did you know that Packt offers eBook versions of every book published, with PDF and ePub files available? You can upgrade to the eBook version at www.PacktPub.com and as a print book customer, you are entitled to a discount on the eBook copy. Get in touch with us at for more details.

At www.PacktPub.com, you can also read a collection of free technical articles, sign up for a range of free newsletters and receive exclusive discounts and offers on Packt books and eBooks.

http://PacktLib.PacktPub.com

Do you need instant solutions to your IT questions? PacktLib is Packt's online digital book library. Here, you can access, read and search across Packt's entire library of books. 

Why Subscribe?

Fully searchable across every book published by Packt

Copy and paste, print and bookmark content

On demand and accessible via web browser

Free Access for Packt account holders

If you have an account with Packt at www.PacktPub.com, you can use this to access PacktLib today and view nine entirely free books. Simply use your login credentials for immediate access.

Preface

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. This book will act as a resource for you to create animation and advanced special effects in your web applications, by following the easy-to-understand steps mentioned in it.

jQuery 2.0 Animation Techniques Beginner's Guide will allow you to master 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. The book uses many examples and explains how to create animations using an easy, step-by-step, beginner's guide approach.

This book provides various examples that gradually build up the reader's knowledge and practical experience in using the jQuery API to create stunning animations. The book starts off by explaining how animations make your user interface interactive and attractive. It explains the various methods used to make the element being animated appear or disappear. It provides a set of steps to create simple animations and show fading animations.

You can later learn how to make complex animations by chaining different effects together as well as how to halt a currently running animation. You will find out how to slide your animation elements and learn to create custom animations that can be complex and specialized.

You will learn how to obtain and set up jQuery UI—the official user interface library for jQuery. This book will tell you how to animate a page's background image, and will teach you how to make images scroll in a certain direction and at a certain speed depending on the movement of the mouse pointer.

What this book covers

Chapter 1, Getting Started, covers the basics including downloading jQuery and setting up a development area, a brief history of animation on the Web, when and where not to use animation, how animation can enhance an interface, and the animation methods exposed by jQuery. A basic example of animation is also covered.

Chapter 2, Image Animation, uses a simple approach to creating an image slider. We then build features into the slider and are left with a script worthy of your next development project.

Chapter 3, Background Animation, takes us through the journey of creating animated background images and background color when our user scrolls down our site. This very subtle animation adds a lot of aesthetic appeal to websites.

Chapter 4, Navigation Animation, covers creative ways to add animation to navigation on our websites. We'll be fading the background color of our web page and smooth scrolling to clicked links on the page.

Chapter 5, Form and Input Animation, focuses on animation that is triggered by our user's interaction with the form. We will guide our users through our form using animations for form validation and