You are previewing jQuery 2.0 Animation Techniques Beginner's Guide.
O'Reilly logo
jQuery 2.0 Animation Techniques Beginner's Guide

Book Description

Bring your websites to life with animations using jQuery

  • Get going with jQuery's animation methods and build a toolkit of ready-to-use animations using jQuery 2.0

  • Over 50 detailed examples on different types of web page animations

  • Create both simple and complex animations using clear, step-by-step instructions, accompanied with screenshots

In Detail

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

  1. jQuery 2.0 Animation Techniques Beginner's Guide
    1. Table of Contents
    2. jQuery 2.0 Animation Techniques Beginner's Guide
    3. Credits
    4. About the Authors
    5. About the Reviewers
    6. www.PacktPub.com
      1. Support files, eBooks, discount offers and more
        1. Why Subscribe?
        2. Free Access for Packt account holders
    7. Preface
      1. What this book covers
      2. What you need for this book
      3. Who this book is for
      4. Conventions
      5. Time for action – heading
        1. What just happened?
        2. Pop quiz – heading
        3. Have a go hero – heading
      6. Reader feedback
      7. Customer support
        1. Downloading the example code
        2. Errata
        3. Piracy
        4. Questions
    8. 1. Getting Started
      1. Animation on the Web
      2. The power of animated UIs
        1. When to use animations
        2. When not to use animations
        3. Animation checklist
      3. Animating with jQuery
      4. Creating the project folder
        1. The template file
      5. A basic animation example
      6. Time for action – creating an animated loader
        1. What just happened?
        2. Have a go hero – extending the loading animation
        3. Pop quiz – basic animation with jQuery
      7. Summary
    9. 2. Image Animation
      1. Image animation
      2. Fading animations
      3. Configuring the animations with arguments
      4. Time for action – setting up the markup and styling
        1. What just happened?
        2. Pop quiz – using fadeIn()
        3. Scripting the image slider
      5. Time for action – scripting the image rotator
        1. What just happened?
        2. Pop quiz – length() and milliseconds
      6. Time for action – extending the pause-on-hover functionality
        1. What just happened?
      7. Time for action – extending the previous and next link features
        1. What just happened?
        2. Pop quiz – preventDefault() and setInterval()
      8. Time for action – extending the pagination functionality
        1. What just happened?
        2. Have a Go Hero – extending the image rotator further
        3. Pop quiz – altering variables and zero index
      9. Summary
    10. 3. Background Animation
      1. Background-color animation
        1. Introducing the animate method
      2. Time for action – animating the body background-color
        1. What just happened?
        2. Chaining together jQuery methods
        3. Have a go hero – extending our script with a loop
        4. Pop quiz – chaining with the animate() method
      3. The illusion of depth with parallax
      4. Time for action – creating the stage and adding the styling
        1. What just happened?
      5. Time for action – animating the background position
        1. What just happened?
        2. Have a go hero - extending parallax
      6. Automatic background animation
      7. Time for action – creating an automatic background animation
        1. What just happened?
        2. Have a go hero – playing under the hood
      8. Let's make it diagonal!
      9. Time for action – animating the background diagonally
        1. What just happened?
        2. Have a go hero
      10. Parallax background on page elements
      11. Time for action – setting up the markup and styling
        1. What just happened?
      12. Time for action – scripting our parallax script
        1. What just happened?
        2. Have a go hero – customizing the speed and direction of the effect
        3. Pop quiz – the scroll() and scrollTop() methods
      13. Summary
    11. 4. Navigation Animation
      1. Creating simple navigation animations
        1. Configuring addClass() and removeClass()
      2. Time for action – setting up our navigation
        1. What just happened?
        2. Have a go hero – extending our hover style
      3. Using the stop() method
      4. Time for action – adding the stop() method
        1. What just happened?
      5. Animating the window with scrollTop()
      6. Time for action – scripting our smooth scrolling animation
        1. What just happened?
      7. Smooth scrolling and page background color
      8. Time for action – creating the super animation
        1. What just happened?
        2. Have a go hero – extending the script further
        3. Pop quiz – the ^ symbol and the stop() method
      9. Summary
    12. 5. Form and Input Animation
      1. Using simple form animations
      2. Time for action – creating the form
        1. What just happened?
      3. Time for action – adding our animation styles to the form
        1. What just happened?
      4. Form validation animations
      5. Time for action – basic dialog form validation
        1. What just happened?
        2. Have a go hero – extending our form validation
      6. Time for action – animating form validation errors
        1. What just happened?
        2. Have a go hero – putting it all together
        3. Pop quiz – form animation and jQuery UI
      7. Summary
    13. 6. Extended Animations with jQuery UI
      1. Obtaining and setting up jQuery UI
        1. Creating a new template file
      2. The new effects added by jQuery UI
        1. Using the effect API
        2. The bounce effect
          1. Syntax
          2. Configuration options
      3. Time for action – using the bounce effect
        1. What just happened?
        2. The highlight effect
          1. Syntax
          2. Configuration options
      4. Time for action – highlighting elements
        1. What just happened?
        2. The pulsate effect
          1. Syntax
          2. Configuration options
      5. Time for action – making an element pulsate
        1. What just happened?
        2. The shake effect
          1. Syntax
          2. Configuration options
      6. Time for action – shaking an element
        1. What just happened?
        2. The size effect
          1. Syntax
          2. Configuration options
      7. Time for action – resizing elements
        1. What just happened?
        2. The transfer effect
          1. Syntax
          2. Configuration options
      8. Time for action – transferring the outline of one element to another
        1. What just happened?
        2. Pop quiz – using the effect API
      9. Using effects with the show and hide logic
        1. The blind effect
          1. Syntax
          2. Configuration options
      10. Time for action – using the blind effect
        1. What just happened?
        2. The clip effect
          1. Syntax
          2. Configuration options
      11. Time for action – clipping an element in and out
        1. What just happened?
        2. The drop effect
          1. Syntax
          2. Configuration options
      12. Time for action – using the effect
        1. What just happened?
        2. The explode effect
          1. Syntax
          2. Configuration options
      13. Time for action – exploding an element
        1. What just happened?
        2. The fold effect
          1. Syntax
          2. Configuration options
      14. Time for action – folding an element away
        1. What just happened?
        2. The puff effect
          1. Syntax
          2. Configuration options
      15. Time for action – making an element disappear in a puff
        1. What just happened?
        2. The slide effect
          1. Syntax
          2. Configuration options
      16. Time for action – sliding elements in and out of view
        1. What just happened?
        2. The scale effect
          1. Syntax
          2. Configuration options
      17. Time for action – scaling an element
        1. What just happened?
        2. Pop quiz – using show/hide logic
        3. Have a go hero – experimenting with the effect API
      18. Easing functions
      19. Time for action – adding easing to effects
        1. What just happened?
      20. Using an object literal to add easing
        1. Have a go hero – using easing
        2. Pop quiz – using easing
      21. Animating between different colors
      22. Time for action – animating between colors
        1. What just happened?
      23. Class transitions
      24. Time for action – transitioning between classes
        1. What just happened?
        2. Pop quiz – easing, color, and class animations
      25. Summary
    14. 7. Custom Animations
      1. The animate method
        1. Per-property easing
        2. An alternative syntax for animate()
      2. Animating an element's position
      3. Time for action – creating an animated content viewer
        1. What just happened?
      4. Time for action – initializing variables and prepping the widget
        1. What just happened?
      5. Time for action – defining a post-animation callback
        1. What just happened?
      6. Time for action – adding event handlers for the UI elements
        1. What just happened?
      7. Skinning the widget
      8. Time for action – adding a new skin
        1. What just happened?
        2. Pop quiz – creating an animated content-viewer
        3. Have a go hero – making the image viewer more scalable
      9. Animating an element's size
      10. Time for action – creating the underlying page and basic styling
        1. What just happened?
      11. Time for action – defining the full and small sizes of the images
        1. What just happened?
      12. Time for action – creating the overlay images
        1. What just happened?
      13. Time for action – creating the overlay wrappers
        1. What just happened?
      14. Time for action – maintaining the overlay positions
        1. What just happened?
        2. Pop quiz – creating expanding images
        3. Have a go hero – doing away with the hardcoded dims object
      15. Creating a jQuery animation plugin
      16. Time for action – creating a test page and adding some styling
        1. What just happened?
      17. Creating the plugin
      18. Time for action – adding a license and defining configurable options
        1. What just happened?
      19. Time for action – adding our plugin method to the jQuery namespace
        1. What just happened?
      20. Time for action – creating the UI
        1. What just happened?
      21. Time for action – creating the transition overlay
        1. What just happened?
      22. Time for action – defining the transitions
        1. What just happened?
      23. Using the plugin
        1. Pop quiz – creating a plugin
        2. Have a go hero – extending the plugin
      24. Summary
    15. 8. Other Popular Animations
      1. Understanding Proximity animations
      2. Time for action – creating and styling the page
        1. What just happened?
      3. Time for action – preparing the page for sliding functionality
        1. What just happened?
      4. Time for action – animating the scroller
        1. What just happened?
      5. Time for action – adding the mouse events
        1. What just happened?
      6. Time for action – adding keyboard events
        1. What just happened?
        2. Have a go hero – extending proximity animations
        3. Pop quiz – implementing proximity animations
      7. Animating page headers
      8. Time for action – creating an animated header
        1. What just happened?
        2. Have a go hero – extending the animated header
      9. Animating text using the marquee effect
      10. Time for action – creating and styling the underlying page
        1. What just happened?
      11. Time for action – retrieving and processing the post list
        1. What just happened?
      12. Time for action – animating the post links
        1. What just happened?
        2. Have a go hero – extending the marquee scroller
        3. Pop quiz – creating a marquee scroller
      13. Summary
    16. 9. CSS3 Animations
      1. CSS3 2D transforms
        1. Understanding the matrix
          1. Translate
          2. Scale
          3. Skew
          4. Rotation
        2. Working with transforms
        3. Using jQuery and transforms
      2. CSS3 3D transforms
      3. Animated rotation with jQuery and CSS3
      4. Time for action – animating an element's rotation
        1. What just happened?
        2. Problems with IE
        3. Pop quiz – implementing CSS3 rotation
        4. Have a go hero – extending CSS3 rotation
      5. Animated skewing
      6. Time for action – creating the underlying markup and basic styling
        1. What just happened?
      7. Time for action – initializing the widget
        1. What just happened?
      8. Time for action – animating an element's skew
        1. What just happened?
      9. Time for action – skewing an element from left to right
        1. What just happened?
      10. Time for action – wiring up the controls
        1. What just happened?
        2. Have a go hero – extending matrix animation
        3. Pop quiz – using the matrix
      11. Summary
    17. 10. Canvas Animations
      1. Learning the HTMLCanvasElement interface
        1. Using the canvas element
        2. Understanding context methods
        3. Native shapes
        4. Drawing using a path
        5. Drawing images and patterns
        6. Text strings
        7. Applying transformation methods
        8. Pixel manipulation
      2. Drawing to the canvas
      3. Time for action – drawing to the canvas
        1. What just happened?
        2. Pop quiz – drawing to the canvas
        3. Have a go hero – creating the flag of your nation
      4. Animating the canvas
      5. Time for action – creating an animation on the canvas
        1. What just happened?
      6. Time for action – animating the white crosses
        1. What just happened?
      7. Time for action – animating the red crosses
        1. What just happened?
        2. Pop quiz – animating the canvas
        3. Have a go hero – creating canvas animations
      8. Creating a canvas game
      9. Time for action – creating the initial page
        1. What just happened?
      10. Time for action – creating the initial script
        1. What just happened?
      11. Time for action – adding the aliens to the page
        1. What just happened?
      12. Time for action – moving the aliens
        1. What just happened?
      13. Time for action – adding handlers to control the ship
        1. What just happened?
        2. Pop quiz – creating canvas-based games
        3. Have a go hero – extending the space invaders clone
      14. Summary
    18. A. Pop Quiz Answers
      1. Chapter 1, Getting Started
        1. Pop quiz – basic animation with jQuery
      2. Chapter 2, Image Animation
        1. Pop quiz – using fadeIn()
        2. Pop quiz – length() and milliseconds
        3. Pop quiz – preventDefault() and setInterval()
        4. Pop quiz – altering variables and zero index
      3. Chapter 3, Background Animation
        1. Pop quiz – chaining with the animate() method
        2. Pop quiz – the scroll() and scrollTop() methods
      4. Chapter 4, Navigation Animation
        1. Pop quiz – the ^ symbol and the stop() method
      5. Chapter 5, Form and Input Animation
        1. Pop quiz – form animation and jQuery UI
      6. Chapter 6, Extended Animations with jQuery UI
        1. Pop quiz – using the effect of API
        2. Pop quiz – using show/hide logic
        3. Pop quiz – using easing
        4. Pop quiz – easing, color, and class animation
      7. Chapter 7, Custom Animations
        1. Pop quiz – creating an animated content-viewer
        2. Pop quiz – creating expanding images
        3. Pop quiz – creating a plugin
      8. Chapter 8, Other Popular Animations
        1. Pop quiz – implementing proximity animations
        2. Pop quiz – creating a marquee scroller
      9. Chapter 9, CSS3 Animations
        1. Pop quiz – implementing CSS3 rotation
        2. Pop quiz – using the matrix
      10. Chapter 10, Canvas Animations
        1. Pop quiz – drawing to the canvas
        2. Pop quiz – animating the canvas
        3. Pop quiz – creating canvas-based games
    19. Index