Browse Library
Sign In Start Free Trial
Close icon Search icon
Account
Browse Library Sign In Start Free Trial

Add to playlist

Create a Playlist

Modal Close icon
You need to login to use this feature.
  • Book Overview & Buying jQuery 2.0 Animation Techniques: Beginner's Guide
  • Table Of Contents Toc
jQuery 2.0 Animation Techniques: Beginner's Guide

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

By : Culpepper, Wellman
Buy this Book
close
close
jQuery 2.0 Animation Techniques: Beginner's Guide

jQuery 2.0 Animation Techniques: Beginner's Guide

By: Culpepper, Wellman
Buy this Book

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 (13 chapters)
close
close
close
Preface
Icon
Preface
Icon
What this book covers
Icon
What you need for this book
Icon
Who this book is for
Icon
Conventions
Icon
Time for action – heading
Icon
Reader feedback
Icon
Customer support
Lock Free Chapter
1
1. Getting Started
Icon
1. Getting Started
Icon
Animation on the Web
Icon
The power of animated UIs
Icon
Animating with jQuery
Icon
Creating the project folder
Icon
A basic animation example
Icon
Time for action – creating an animated loader
Icon
Summary
2
2. Image Animation
Icon
2. Image Animation
Icon
Image animation
Icon
Fading animations
Icon
Configuring the animations with arguments
Icon
Time for action – setting up the markup and styling
Icon
Time for action – scripting the image rotator
Icon
Time for action – extending the pause-on-hover functionality
Icon
Time for action – extending the previous and next link features
Icon
Time for action – extending the pagination functionality
Icon
Summary
3
3. Background Animation
Icon
3. Background Animation
Icon
Background-color animation
Icon
Time for action – animating the body background-color
Icon
The illusion of depth with parallax
Icon
Time for action – creating the stage and adding the styling
Icon
Time for action – animating the background position
Icon
Automatic background animation
Icon
Time for action – creating an automatic background animation
Icon
Let's make it diagonal!
Icon
Time for action – animating the background diagonally
Icon
Parallax background on page elements
Icon
Time for action – setting up the markup and styling
Icon
Time for action – scripting our parallax script
Icon
Summary
4
4. Navigation Animation
Icon
4. Navigation Animation
Icon
Creating simple navigation animations
Icon
Time for action – setting up our navigation
Icon
Using the stop() method
Icon
Time for action – adding the stop() method
Icon
Animating the window with scrollTop()
Icon
Time for action – scripting our smooth scrolling animation
Icon
Smooth scrolling and page background color
Icon
Time for action – creating the super animation
Icon
Summary
5
5. Form and Input Animation
chevron up
Icon
5. Form and Input Animation
Icon
Using simple form animations
Icon
Time for action – creating the form
Icon
Time for action – adding our animation styles to the form
Icon
Form validation animations
Icon
Time for action – basic dialog form validation
Icon
Time for action – animating form validation errors
Icon
Summary
6
6. Extended Animations with jQuery UI
Icon
6. Extended Animations with jQuery UI
Icon
Obtaining and setting up jQuery UI
Icon
The new effects added by jQuery UI
Icon
Time for action – using the bounce effect
Icon
Time for action – highlighting elements
Icon
Time for action – making an element pulsate
Icon
Time for action – shaking an element
Icon
Time for action – resizing elements
Icon
Time for action – transferring the outline of one element to another
Icon
Using effects with the show and hide logic
Icon
Time for action – using the blind effect
Icon
Time for action – clipping an element in and out
Icon
Time for action – using the effect
Icon
Time for action – exploding an element
Icon
Time for action – folding an element away
Icon
Time for action – making an element disappear in a puff
Icon
Time for action – sliding elements in and out of view
Icon
Time for action – scaling an element
Icon
Easing functions
Icon
Time for action – adding easing to effects
Icon
Using an object literal to add easing
Icon
Animating between different colors
Icon
Time for action – animating between colors
Icon
Class transitions
Icon
Time for action – transitioning between classes
Icon
Summary
7
7. Custom Animations
Icon
7. Custom Animations
Icon
The animate method
Icon
Animating an element's position
Icon
Time for action – creating an animated content viewer
Icon
Time for action – initializing variables and prepping the widget
Icon
Time for action – defining a post-animation callback
Icon
Time for action – adding event handlers for the UI elements
Icon
Skinning the widget
Icon
Time for action – adding a new skin
Icon
Animating an element's size
Icon
Time for action – creating the underlying page and basic styling
Icon
Time for action – defining the full and small sizes of the images
Icon
Time for action – creating the overlay images
Icon
Time for action – creating the overlay wrappers
Icon
Time for action – maintaining the overlay positions
Icon
Creating a jQuery animation plugin
Icon
Time for action – creating a test page and adding some styling
Icon
Creating the plugin
Icon
Time for action – adding a license and defining configurable options
Icon
Time for action – adding our plugin method to the jQuery namespace
Icon
Time for action – creating the UI
Icon
Time for action – creating the transition overlay
Icon
Time for action – defining the transitions
Icon
Using the plugin
Icon
Summary
8
8. Other Popular Animations
Icon
8. Other Popular Animations
Icon
Understanding Proximity animations
Icon
Time for action – creating and styling the page
Icon
Time for action – preparing the page for sliding functionality
Icon
Time for action – animating the scroller
Icon
Time for action – adding the mouse events
Icon
Time for action – adding keyboard events
Icon
Animating page headers
Icon
Time for action – creating an animated header
Icon
Animating text using the marquee effect
Icon
Time for action – creating and styling the underlying page
Icon
Time for action – retrieving and processing the post list
Icon
Time for action – animating the post links
Icon
Summary
9
9. CSS3 Animations
Icon
9. CSS3 Animations
Icon
CSS3 2D transforms
Icon
CSS3 3D transforms
Icon
Animated rotation with jQuery and CSS3
Icon
Time for action – animating an element's rotation
Icon
Animated skewing
Icon
Time for action – creating the underlying markup and basic styling
Icon
Time for action – initializing the widget
Icon
Time for action – animating an element's skew
Icon
Time for action – skewing an element from left to right
Icon
Time for action – wiring up the controls
Icon
Summary
10
10. Canvas Animations
Icon
10. Canvas Animations
Icon
Learning the HTMLCanvasElement interface
Icon
Drawing to the canvas
Icon
Time for action – drawing to the canvas
Icon
Animating the canvas
Icon
Time for action – creating an animation on the canvas
Icon
Time for action – animating the white crosses
Icon
Time for action – animating the red crosses
Icon
Creating a canvas game
Icon
Time for action – creating the initial page
Icon
Time for action – creating the initial script
Icon
Time for action – adding the aliens to the page
Icon
Time for action – moving the aliens
Icon
Time for action – adding handlers to control the ship
Icon
Summary
11
A. Pop Quiz Answers
Icon
Chapter 1, Getting Started
Icon
Chapter 2, Image Animation
Icon
Chapter 3, Background Animation
Icon
Chapter 4, Navigation Animation
Icon
Chapter 5, Form and Input Animation
Icon
Chapter 6, Extended Animations with jQuery UI
Icon
Chapter 7, Custom Animations
Icon
Chapter 8, Other Popular Animations
Icon
Chapter 9, CSS3 Animations
Icon
Chapter 10, Canvas Animations
12
Index
Icon
Index

Chapter 5. Form and Input Animation

In this chapter, we will look at examples and concepts of form animation using jQuery. We can use almost any animation type for animating form inputs (because of quirks and compatibility). However, keep in mind that a lot of animations won't make sense or will confuse our user, so we'll be steering clear of those. These animation types are ones that are too "jarring" to the eye. For example, if we change the dimensions of the form inputs, our user might not know what it means. For our first examples, we're going to be sticking with color changes mostly. Later in the chapter, we'll strap on more animation support using jQuery UI to really get our forms moving!

In our examples for this chapter, we'll be creating HTML forms so that we can get the visual representation of form animation. For these examples, we won't be adding a form action because we don't need them to submit properly.

In this chapter we...

Visually different images
CONTINUE READING
83
Tech Concepts
36
Programming languages
73
Tech Tools
Icon Unlimited access to the largest independent learning library in tech of over 8,000 expert-authored tech books and videos.
Icon Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.
Icon 50+ new titles added per month and exclusive early access to books as they are being written.
jQuery 2.0 Animation Techniques: Beginner's Guide
End of Section 5
Next Section
notes
bookmark Notes and Bookmarks search Search in title playlist Add to playlist font-size Font size

Change the font size

margin-width Margin width

Change margin width

day-mode Day/Sepia/Night Modes

Change background colour

Close icon Search
Country selected
Close icon Your notes and bookmarks

Confirmation

Modal Close icon
claim successful
Order Page Read Now

Buy this book with your credits?

Modal Close icon
Are you sure you want to buy this book with one of your credits?
Close
YES, BUY

Submit Your Feedback

Modal Close icon
Modal Close icon
Modal Close icon