Log In
Or create an account ->
Imperial Library
Home
About
News
Upload
Forum
Help
Login/SignUp
Index
jQuery 2.0 Animation Techniques Beginner's Guide
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
← Prev
Back
Next →
← Prev
Back
Next →