jQuery 2.0 animation techniques beginner's guide / Adam Culpepper, Dan Wellman.

Format:

Book

Author/Creator:

Culpepper, Adam.

Contributor:

Wellman, Dan.

Language:

English

Subjects (All):

JavaScript (Computer program language).

Query languages (Computer science).

Web site development.

Physical Description:

1 online resource (292 pages) : illustrations

Edition:

1st ed.

Place of Publication:

Birmingham : Packt Publishing, 2013.

Language Note:

English

Summary:

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.

Contents:

Intro

jQuery 2.0 Animation Techniques Beginner's Guide

Table of Contents

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

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

Pop quiz - using fadeIn()

Scripting the image slider

Time for action - scripting the image rotator

Pop quiz - length() and milliseconds

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

Time for action - extending the previous and next link features

Pop quiz - preventDefault() and setInterval()

Time for action - extending the pagination functionality

Have a Go Hero - extending the image rotator further

Pop quiz - altering variables and zero index

3. Background Animation.

Background-color animation

Introducing the animate method

Time for action - animating the body background-color

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

Time for action - animating the background position

Have a go hero - extending parallax

Automatic background animation

Time for action - creating an automatic background animation

Have a go hero - playing under the hood

Let's make it diagonal!

Time for action - animating the background diagonally

Have a go hero

Parallax background on page elements

Time for action - scripting our parallax script

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

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

4. Navigation Animation

Creating simple navigation animations

Configuring addClass() and removeClass()

Time for action - setting up our navigation

Have a go hero - extending our hover style

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

Have a go hero - extending the script further

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

5. 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

Have a go hero - extending our form validation

Time for action - animating form validation errors

Have a go hero - putting it all together

Pop quiz - form animation and jQuery UI

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

The highlight effect

Time for action - highlighting elements

The pulsate effect

Time for action - making an element pulsate

The shake effect

Time for action - shaking an element

The size effect

Time for action - resizing elements

The transfer effect

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

Pop quiz - using the effect API

Using effects with the show and hide logic

The blind effect

Time for action - using the blind effect

The clip effect

Time for action - clipping an element in and out

The drop effect

Time for action - using the effect

The explode effect.

Syntax

Time for action - exploding an element

The fold effect

Time for action - folding an element away

The puff effect

Time for action - making an element disappear in a puff

The slide effect

Time for action - sliding elements in and out of view

The scale effect

Time for action - scaling an element

Pop quiz - using show/hide logic

Have a go hero - experimenting with the effect API

Easing functions

Time for action - adding easing to effects

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

Class transitions

Time for action - transitioning between classes

Pop quiz - easing, color, and class animations

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

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

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

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

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

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

Pop quiz - creating a plugin

Have a go hero - extending the plugin

8. 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

Have a go hero - extending proximity animations

Pop quiz - implementing proximity animations

Animating page headers

Time for action - creating an animated header

Have a go hero - extending the animated header

Animating text using the marquee effect.

Time for action - creating and styling the underlying page.

Notes:

Includes index.

Description based on online resource; title from PDF title page (ebrary, viewed January 19, 2014).

ISBN:

1-78216-965-2

OCLC:

867075636