Web Animation using JavaScript: Develop & Design (Develop and Design)

How to Download the Code Sample The code behind this animation demo is available for download from p ...

Code structure Let’s take a look at the code that powers this demo. It is structured as follows: ...

Circle animation: The code responsible for animating the circle elements themselves. Try to familiarize yourself wi ...

translateX: [ function() { return “+=” + r(-screenWidth/2.5 ...

Code section: Circle creation Click here to view code image /** Circle creation **/ var circleCount = 250, ...

on the element’s parent. In this case, that’s what the $container element is for. The greater the value that ...

the final value to animate the property toward (215px, in the case above) as well as the initial value to ...

Code section: Circle animation This is where things start getting interesting. Let’s take a look th ...

maintainable. Notice that, to produce the randomized values, this section of code leverages our r helper function ...

.velocity(“reverse”, { easing: “easeOutQuad” }) .velocity({ opacity: 0 }, 2000); It’s time to ...

Tip To preview the behavior of the popular easing types, visit http://easings.net. When the reverse animation ...

...

Index Symbols and Numbers $.animate() 13 3D CSS primer on 156 transforms 96 A Adobe After Effect, animating text ...

limiting in motion design 45 mirroring 44 older browsers problem 139 older browsers solutions 139 – 140 ...

delimiter option 85 generateValueClass option 86 – 87 how it works 83 – 84 installing on pages 84 – 85 preparing ...

Chaining effects and 69 using Velocity with jQuery and 16 in Velocity 20 character delimiter, Blast.js 82 ...

performance benefits of using opacity instead of 132 Velocity options 31 – 32 complete option, Velocity 24 Co ...

Velocity arguments corresponding to 16 Velocity support for CSS transform property 32 customClass option, Blas ...

timing multipliers and 73 E Easing options, Velocity 21 – 23 eBay, purchasing older devices from 144 Effects ...

span elements 87 – 88 SVG elements compared with HTML elements 104 text elements 80 eq() functi ...