jQuery 2.0 Animation Techniques: Beginner's Guide

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.

jQuery 2.0 Animation Techniques Beginner's Guide

Credits

About the Authors

About the Reviewers

www.PacktPub.com

Preface

Free Chapter

Getting Started

Animation on the Web

The power of animated UIs

Animating with jQuery

Creating the project folder

A basic animation example

Time for action – creating an animated loader

Summary

Image Animation

Image animation

Fading animations

Configuring the animations with arguments

Time for action – setting up the markup and styling

Time for action – scripting the image rotator

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

Time for action – extending the previous and next link features

Time for action – extending the pagination functionality

Summary

Background Animation

Background-color animation

Time for action – animating the body background-color

The illusion of depth with parallax

Time for action – creating the stage and adding the styling

Time for action – animating the background position

Automatic background animation

Time for action – creating an automatic background animation

Let's make it diagonal!

Time for action – animating the background diagonally

Parallax background on page elements

Time for action – setting up the markup and styling

Time for action – scripting our parallax script

Summary

Navigation Animation

Creating simple navigation animations

Time for action – setting up our navigation

Using the stop() method

Time for action – adding the stop() method

Animating the window with scrollTop()

Time for action – scripting our smooth scrolling animation

Smooth scrolling and page background color

Time for action – creating the super animation

Summary

Form and Input Animation

Using simple form animations

Time for action – creating the form

Time for action – adding our animation styles to the form

Form validation animations

Time for action – basic dialog form validation

Time for action – animating form validation errors

Summary

Extended Animations with jQuery UI

Obtaining and setting up jQuery UI

The new effects added by jQuery UI

Time for action – using the bounce effect

Time for action – highlighting elements

Time for action – making an element pulsate

Time for action – shaking an element

Time for action – resizing elements

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

Using effects with the show and hide logic

Time for action – using the blind effect

Time for action – clipping an element in and out

Time for action – using the effect

Time for action – exploding an element

Time for action – folding an element away

Time for action – making an element disappear in a puff

Time for action – sliding elements in and out of view

Time for action – scaling an element

Easing functions

Time for action – adding easing to effects

Using an object literal to add easing

Animating between different colors

Time for action – animating between colors

Class transitions

Time for action – transitioning between classes

Summary

Custom Animations

The animate method

Animating an element's position

Time for action – creating an animated content viewer

Time for action – initializing variables and prepping the widget

Time for action – defining a post-animation callback

Time for action – adding event handlers for the UI elements

Skinning the widget

Time for action – adding a new skin

Animating an element's size

Time for action – creating the underlying page and basic styling

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

Time for action – creating the overlay images

Time for action – creating the overlay wrappers

Time for action – maintaining the overlay positions

Creating a jQuery animation plugin

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

Creating the plugin

Time for action – adding a license and defining configurable options

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

Time for action – creating the UI

Time for action – creating the transition overlay

Time for action – defining the transitions

Using the plugin

Summary

Other Popular Animations

Understanding Proximity animations

Time for action – creating and styling the page

Time for action – preparing the page for sliding functionality

Time for action – animating the scroller

Time for action – adding the mouse events

Time for action – adding keyboard events

Animating page headers

Time for action – creating an animated header

Animating text using the marquee effect

Time for action – creating and styling the underlying page

Time for action – retrieving and processing the post list

Time for action – animating the post links

Summary

CSS3 Animations

CSS3 2D transforms

CSS3 3D transforms

Animated rotation with jQuery and CSS3

Time for action – animating an element's rotation

Animated skewing

Time for action – creating the underlying markup and basic styling

Time for action – initializing the widget

Time for action – animating an element's skew

Time for action – skewing an element from left to right

Time for action – wiring up the controls

Summary

Canvas Animations

Learning the HTMLCanvasElement interface

Drawing to the canvas

Time for action – drawing to the canvas

Animating the canvas

Time for action – creating an animation on the canvas

Time for action – animating the white crosses

Time for action – animating the red crosses

Creating a canvas game

Time for action – creating the initial page

Time for action – creating the initial script

Time for action – adding the aliens to the page

Time for action – moving the aliens

Time for action – adding handlers to control the ship

Summary

Pop Quiz Answers

Chapter 1, Getting Started

Chapter 2, Image Animation

Chapter 3, Background Animation

Chapter 4, Navigation Animation

Chapter 5, Form and Input Animation

Chapter 6, Extended Animations with jQuery UI

Chapter 7, Custom Animations

Chapter 8, Other Popular Animations

Chapter 9, CSS3 Animations

Chapter 10, Canvas Animations

Index

Customer Reviews

5 star

4 star

3 star

2 star

1 star

Time for action – exploding an element

In this example we will make an image explode.

Just add the following simple image to the <body> element of the template file:
```
<img src="img/grenade.jpg" alt="Grenade">
```
Then add the following equally simple code to the empty function at the bottom of the template file:
```
$("img").click(function() {
  $(this).effect("explode");
});
```
Save this page as explode.html.
This example is so simple we don't even need a stylesheet. Once we click on the grenade, it is exploded into the default number of pieces:

The exploded element fades away as the individual pieces of the element move apart.

What just happened?

In the example, all we need to do is attach a click handler directly to the image which applies the explode effect using the effect() method. No configuration in this instance is required because the default mode of the effect is hide.

Note

Note that we can also run this effect in reverse by setting the mode option to show, or by using the show() logic instead...

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

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

Overview of this book

Related Content you might be interested in

Current Title:

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

Time for action – exploding an element

What just happened?

Note