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

7 Full Page Animations So far the examples that we've looked at are animations that have formed a single part of the user interface of the page, or formed part of a specific widget. In this chapter, we'll look at animations that take up the whole page, such as background-image animations, or "feature" animations where the thing being animated is the main focus of the page. In this chapter, we'll cover the following subjects: Animating page scroll Animating background-position to create a parallax effect Combining page scroll with page navigation Creating stop-motion animation All of the examples that we'll look at in this chapter will be based on the animate() method that was introduced earlier in the book. As we've already learnt how the method is used, we can jump straight into the action and start on the examples. Animated page scroll We can animate the scroll of the entire page very easily using a combination of some built-in jQuery functionality and some plain vanilla JavaScript. Long blog pages are often split into smaller, more readable sections with sub-headings, and a secondary navigation structure, separate from the main site navigation, which links to the different sections. Optionally, there may also be back to top links that take the reader back up to the top of the page.

Full Page Animations Can we animate the scroll using jQuery's animate() method so that the document scrolls smoothly instead of jumping to the desired location when any of these links are clicked? Not exactly—the scrollTop() method that jQuery exposes cannot be used directly in conjunction with the animate() method. But we can spoof the animation effect ourselves manually and make it appear as if the scroll is animated very easily, which is what we'll do in the first example of this chapter. Time for action – creating the page that will scroll and its styling The example page needs to be quite long for the scroll effect to work. The underlying HTML used could be any modern blog post. 1. Add the following code to the of the template file: A long article with lots of sections Section 1 Section 2 Section 3 Section 4 Section 5 Posted on 13 November 2010 by Dan Wellman Section 1 Lorem ipsum dolor... Lorem ipsum dolor... Back to top [ 180 ]

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

Can we animate the scroll using <strong>jQuery</strong>'s animate() method so that the document scrolls<br />

smoothly instead <strong>of</strong> jumping to the desired location when any <strong>of</strong> these links are clicked?<br />

Not exactly—the scrollTop() method that <strong>jQuery</strong> exposes cannot be used directly in<br />

conjunction with the animate() method.<br />

But we can spo<strong>of</strong> the animation effect ourselves manually and make it appear as if the scroll<br />

is animated very easily, which is what we'll do in the first example <strong>of</strong> this chapter.<br />

Time for action – creating the page that will scroll<br />

and its styling<br />

The example page needs to be quite long for the scroll effect to work. The underlying HTML<br />

used could be any modern blog post.<br />

1. Add the following code to the <strong>of</strong> the template file:<br />

<br />

<br />

A long article with lots <strong>of</strong> sections<br />

<br />

<br />

<br />

Section 1<br />

<br />

Section 2<br />

<br />

Section 3<br />

<br />

Section 4<br />

<br />

Section 5<br />

<br />

<br />

Posted on <br />

13 November 2010 by Dan Wellman<br />

<br />

<br />

Section 1<br />

Lorem ipsum dolor...<br />

Lorem ipsum dolor...<br />

<br />

Back to top<br />

<br />

<br />

[ 180 ]

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!