Book Image

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

Book Image

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.

Related Content you might be interested in

Current Title:

Small book image
jQuery 2.0 Animation Techniques: Beginner's Guide - Second Edition
Dec, 2013 | 292 pages
No titles found
Table of Contents (18 chapters)
jQuery 2.0 Animation Techniques Beginner's Guide
jQuery 2.0 Animation Techniques Beginner's Guide
Credits
Credits
About the Authors
About the Authors
About the Reviewers
About the Reviewers
www.PacktPub.com
www.PacktPub.com
Preface
Preface
Free Chapter
1
Getting Started
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
2
Image Animation
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
3
Background Animation
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
4
Navigation Animation
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
5
Form and Input Animation
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
6
Extended Animations with jQuery UI
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
7
Custom Animations
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
8
Other Popular Animations
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
9
CSS3 Animations
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
10
Canvas Animations
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
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
Index

Time for action – resizing elements

A popular use of growing and shrinking elements is the Fisheye menu, where elements grow when the mouse pointer hovers over them, and shrink back down when the pointer moves off of them. This effect is also used by the icons on the dock in Apple's OSX.

Using the size effect, we can implement our own basic Fisheye menu with just a few lines of code.

  1. Add the following markup to the <body> of the template file:

    <div id="dock">
  <a href="#" class="icon" id="finder">
    <img src="img/finder.png"></a>
  <a href="#" class="icon" id="mail">
    <img src="img/mail.png"></a>
  <a href="#" class="icon" id="safari">
    <img src="img/safari.png"></a>
  <a href="#" class="icon" id="firefox">
    <img src="img/firefox_small.png"></a>
  <a href="#" class="icon" id="itunes">
    <img src="img/itunes.png"></a>
</div>

  2. Add the following JavaScript to the third <script...

Previous Section
End of Section 8
Next Section