jQuery 2.0 Animation Techniques: Beginner's Guide


jQuery 2.0 Animation Techniques: Beginner's Guide
eBook: $29.99
Formats: PDF, PacktLib, ePub and Mobi formats
$25.49
save 15%!
Print + free eBook + free PacktLib access to the book: $79.98    Print cover: $49.99
$49.99
save 37%!
Free Shipping!
UK, US, Europe and selected countries in Asia.
Also available on:
Overview
Table of Contents
Author
Support
Sample Chapters
  • 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

Book Details

Language : English
Paperback : 292 pages [ 235mm x 191mm ]
Release Date : December 2013
ISBN : 1782169644
ISBN 13 : 9781782169642
Author(s) : Adam Culpepper, Dan Wellman
Topics and Technologies : All Books, Beginner's Guides, Open Source


Table of Contents

Preface
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
Appendix: Pop Quiz Answers
Index
  • Chapter 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
    • Summary
  • Chapter 2: Image Animation
    • Image animation
    • Fading animations
    • Configuring the animations with arguments
    • Time for action – setting up the markup and styling
      • Scripting the image slider
    • 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
  • Chapter 3: Background Animation
    • Background-color animation
      • Introducing the animate method
    • Time for action – animating the body background-color
      • Chaining together jQuery methods
    • 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
  • Chapter 4: Navigation Animation
    • Creating simple navigation animations
      • Configuring addClass() and removeClass()
    • 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
  • Chapter 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
    • Time for action – animating form validation errors
    • Summary
  • Chapter 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
        • Syntax
        • Configuration options
    • Time for action – highlighting elements
      • The pulsate effect
        • Syntax
        • Configuration options
    • Time for action – making an element pulsate
      • The shake effect
        • Syntax
        • Configuration options
    • Time for action – shaking an element
      • The size effect
        • Syntax
        • Configuration options
    • Time for action – resizing elements
      • The transfer effect
        • Syntax
        • Configuration options
    • Time for action – transferring the outline of one element to another
    • Using effects with the show and hide logic
      • The blind effect
        • Syntax
        • Configuration options
    • Time for action – using the blind effect
      • The clip effect
        • Syntax
        • Configuration options
    • Time for action – clipping an element in and out
      • The drop effect
        • Syntax
        • Configuration options
    • Time for action – using the effect
      • The explode effect
        • Syntax
        • Configuration options
    • Time for action – exploding an element
      • The fold effect
        • Syntax
        • Configuration options
    • Time for action – folding an element away
      • The puff effect
        • Syntax
        • Configuration options
    • Time for action – making an element disappear in a puff
      • The slide effect
        • Syntax
        • Configuration options
    • Time for action – sliding elements in and out of view
      • The scale effect
        • Syntax
        • Configuration options
    • 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
  • Chapter 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
    • 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
  • Chapter 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
    • 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
  • Chapter 9: CSS3 Animations
    • CSS3 2D transforms
      • Understanding the matrix
        • Translate
        • Scale
        • Skew
        • Rotation
      • Working with transforms
      • Using jQuery and transforms
    • CSS3 3D transforms
    • Animated rotation with jQuery and CSS3
    • Time for action – animating an element's rotation
      • Problems with IE
    • 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
  • Chapter 10: Canvas Animations
    • Learning the HTMLCanvasElement interface
      • Using the canvas element
      • Understanding context methods
      • Native shapes
      • Drawing using a path
      • Drawing images and patterns
      • Text strings
      • Applying transformation methods
      • Pixel manipulation
    • 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
  • Appendix: 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

Adam Culpepper

Adam Culpepper is a frontend web developer who works for Envoc, a software development firm, located in Baton Rouge, Louisiana. He is very active in his community; organizing, founding, and sitting on the board of many industry-related groups and organizations in his area. When he's not reading, writing, working, organizing, or attending a community event, he's spending time with his great friends and family or his girlfriend Amber, his son Aiden and his cat Emma. Adam can be reached at his website (www.adamculpepper.net) or through Twitter (@adamculpepper).


Dan Wellman

Dan Wellman is an author and frontend engineer living on the South Coast of the UK and working in London. By day he works for Skype and has a blast writing application-grade JavaScript. By night he writes books and tutorials focused mainly on frontend web development. He is also a staff writer for the Tuts+ arm of the Envato network, and occasionally writes for .Net magazine. He's the proud father of four amazing children, and the grateful husband of a wonderful wife.

Sorry, we don't have any reviews for this title yet.

Code Downloads

Download the code and support files for this book.


Submit Errata

Please let us know if you have found any errors not listed on this list by completing our errata submission form. Our editors will check them and add them to this list. Thank you.

Sample chapters

You can view our sample chapters and prefaces of this title on PacktLib or download sample chapters in PDF format.

Frequently bought together

jQuery 2.0 Animation Techniques: Beginner's Guide +    Oracle Data Guard 11gR2 Administration Beginner's Guide =
50% Off
the second eBook
Price for both: $45.60

Buy both these recommended eBooks together and get 50% off the cheapest eBook.

What you will learn from this book

  • Create custom animations using jQuery’s animate() method
  • Fade, hide, shrink, and slide your animations using jQuery’s built-in animation helper methods
  • Implement subtle UI effects, user-triggered animations and full-page feature animations to animate the user interface of your web applications
  • Make your background images come to life with movement and animation
  • Create an automatic slider animation with just a few lines of code
  • Discover parallax animations and how they can be used in your web projects
  • Simulate animation in a variety of ways using other non-animation-specific jQuery methods
  • Get your images scrolling in a certain direction, and at a certain speed, depending on the movements of the mouse pointer

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.

Approach

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.

Who this book is for

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.

Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software