jQuery 1.4 Animation Techniques - Index of
Share Embed Flag
Download ePaper

jQuery 1.4 Animation Techniques - Index of

jQuery 1.4 Animation Techniques - Index of jQuery 1.4 Animation Techniques - Index of

clientrd.com
from clientrd.com More from this publisher
02.06.2013 Views

[ 185 ] Chapter 7 Within the while loop, we use jQuery's scrollTop() method in setter mode to set the scroll to the value of the newScroll variable, and then increment the newScroll value using our speed variable. This is what I meant by spoofing the animated scroll—the document just scrolls sequentially in a series of jumps; it isn't actually animated, but because it happens fairly rapidly it gives the impression of being animated. After the click handler for the table of contents links, we also set a click handler on the back to top links. Because we're just going straight back to the top of the page, we don't need to do any complex calculations, so this function is really just a simplified version of the first function. There is already a jQuery plugin that can be used to animate scroll: the scrollTo plugin. This plugin allows us to easily animate both vertical and horizontal scroll on any element whose contents overflows the dimensions set on it. However, as an exercise in how to fake animation without using any of jQuery's animation methods, I thought it would be of value to do it ourselves manually here. We'll use the plugin later in the chapter. For reference it was created by Ariel Flesler and can be downloaded from http://flesler.blogspot. com/2007/10/jqueryscrollto.html. Pop quiz – animating page scroll 1. In this example we used old-school JavaScript to obtain a reference to the DOM node instead of using jQuery. Why? a. Because it's easier b. Because it's fun to mix things up a little c. Because it's faster to give jQuery selectors a DOM node context so that the entire document doesn't need to be searched when selecting elements from the page d. Because it makes the byte count of the page smaller 2. Why can we not use jQuery to animate the page scroll? a. Because scrollTop (or window.pageYOffset) are properties of the document or window and not CSS style properties b. Because the values for these properties are not true integers c. Because jQuery does not want us to animate scroll d. We can, we just chose to do it this way instead

Full Page Animations Have a go hero – extending animated page scroll In this example we just animated the vertical scroll of the document. Have a go at changing the example so that the horizontal scroll can also be animated. This will entail making the page not just longer than the viewport, but also wider too. The illusion of depth with parallax The term parallax, when used in the context of computer graphics, especially in video games, refers to the technique of using multiple background layers that scroll at slightly different speeds to create the illusion of depth. Although not as widely deployed in modern gaming, thanks to the advent of richer 3D graphics engines, parallax is still seen frequently in portable gaming devices, and increasingly, on the Web. A parallax effect is achievable using pure CSS, as demonstrated nicely by the Silverback site (see http://silverbackapp.com/ for the effect, and http://thinkvitamin.com/ design/how-to-recreate-silverbacks-parallax-effect/ for the details on how it was implemented). This application of parallax will only become apparent when the window is resized, which is a fantastic effect when the window is resized, but doesn't help us if we want the effect to take more of a center stage. A little help from the new cssHooks functionality jQuery 1.4.3 introduced a new mechanism for easily extending the css() and animate() methods of jQuery. The new cssHooks feature allows us to easily extend the css() method to allow the getting and setting of CSS style properties not natively supported by jQuery. As the animate() method makes use of the css() method internally, we can use the cssHooks to add animation support for certain style properties that previously were unsupported. This is great, but even better is the fact that some of the jQuery core contributors, most notably Mr Brandon Aaron, have already begun building a suite of pre-built cssHooks for certain style properties, including background-position. We can use one of these brand new, pre-built cssHooks in our next example. The file containing the cssHook for background-position is included in the code download accompanying this book, but for reference, the complete suite can be found at https://github.com/brandonaaron/jquery-cssHooks. [ 186 ]

Full Page <strong>Animation</strong>s<br />

Have a go hero – extending animated page scroll<br />

In this example we just animated the vertical scroll <strong>of</strong> the document. Have a go at changing<br />

the example so that the horizontal scroll can also be animated. This will entail making the<br />

page not just longer than the viewport, but also wider too.<br />

The illusion <strong>of</strong> depth with parallax<br />

The term parallax, when used in the context <strong>of</strong> computer graphics, especially in video games,<br />

refers to the technique <strong>of</strong> using multiple background layers that scroll at slightly different<br />

speeds to create the illusion <strong>of</strong> depth. Although not as widely deployed in modern gaming,<br />

thanks to the advent <strong>of</strong> richer 3D graphics engines, parallax is still seen frequently in portable<br />

gaming devices, and increasingly, on the Web.<br />

A parallax effect is achievable using pure CSS, as demonstrated nicely by the Silverback site<br />

(see http://silverbackapp.com/ for the effect, and http://thinkvitamin.com/<br />

design/how-to-recreate-silverbacks-parallax-effect/ for the details on how it<br />

was implemented). This application <strong>of</strong> parallax will only become apparent when the window<br />

is resized, which is a fantastic effect when the window is resized, but doesn't help us if we<br />

want the effect to take more <strong>of</strong> a center stage.<br />

A little help from the new cssHooks functionality<br />

<strong>jQuery</strong> <strong>1.4</strong>.3 introduced a new mechanism for easily extending the css() and animate()<br />

methods <strong>of</strong> <strong>jQuery</strong>. The new cssHooks feature allows us to easily extend the css()<br />

method to allow the getting and setting <strong>of</strong> CSS style properties not natively supported by<br />

<strong>jQuery</strong>. As the animate() method makes use <strong>of</strong> the css() method internally, we can use<br />

the cssHooks to add animation support for certain style properties that previously were<br />

unsupported.<br />

This is great, but even better is the fact that some <strong>of</strong> the <strong>jQuery</strong> core contributors, most<br />

notably Mr Brandon Aaron, have already begun building a suite <strong>of</strong> pre-built cssHooks for<br />

certain style properties, including background-position. We can use one <strong>of</strong> these brand<br />

new, pre-built cssHooks in our next example.<br />

The file containing the cssHook for background-position is included in the code<br />

download accompanying this book, but for reference, the complete suite can be<br />

found at https://github.com/brandonaaron/jquery-cssHooks.<br />

[ 186 ]

logo

products

Resources

Company

Terms of service
Privacy policy
Cookie policy
Cookie settings
Imprint
Change language
Made with love in Switzerland
© 2024 Yumpu.com all rights reserved

Hooray! Your file is uploaded and ready to be published.

Saved successfully!

Ooh no, something went wrong!