402 Pages · 5.38 mb ·
Julian Shapiro
Web Design
- Title Page (Page 2) - Copyright Page (Page 3) - Dedication Page (Page 5) - Acknowledgements (Page 6) - Contents (Page 7) - Foreword (Page 12) - Introduction (Page 14) - Chapter 1. Advantages of JavaScript Animation (Page 15) - JavaScript vs. CSS animation (Page 15) - Great performance (Page 16) - Features (Page 17) - Page scrolling (Page 17) - Animation reversal (Page 17) - Physics-based motion (Page 18) - Maintainable workflows (Page 18) - Wrapping up (Page 18) - Chapter 2. Animating with Velocity.js (Page 20) - Types of JavaScript animation libraries (Page 20) - Installing jQuery and Velocity (Page 20) - Using Velocity: Basics (Page 21) - Velocity and jQuery (Page 21) - Arguments (Page 21) - Properties (Page 22) - Values (Page 23) - Chaining (Page 24) - Using Velocity: Options (Page 24) - Duration (Page 24) - Easing (Page 25) - Begin and Complete (Page 27) - Loop (Page 27) - Delay (Page 29) - Display and Visibility (Page 29) - Using Velocity: Additional features (Page 31) - Reverse Command (Page 31) - Scrolling (Page 32) - Colors (Page 32) - Transforms (Page 33) - Using Velocity: Without jQuery (intermediate) (Page 33) - Wrapping up (Page 35) - Chapter 3. Motion Design Theory (Page 36) - Motion design improves the user experience (Page 36) - Utility (Page 37) - Borrow conventions (Page 37) - Preview outcomes (Page 38) - Distraction over boredom (Page 38) - Leverage primal instincts (Page 39) - Make interactions visceral (Page 39) - Reflect gravitas (Page 39) - Reduce concurrency (Page 40) - Reduce variety (Page 40) - Mirror animations (Page 40) - Limit durations (Page 41) - Limit animations (Page 41) - Elegance (Page 42) - Don’t be frivolous (Page 42) - Your one opportunity to be frivolous (Page 42) - Consider personality (Page 43) - Go beyond opacity (Page 43) - Break animations into steps (Page 43) - Stagger animations (Page 44) - Flow from the triggering element (Page 44) - Use graphics (Page 44) - Wrapping up (Page 46) - Chapter 4. Animation Workflow (Page 47) - CSS animation workflow (Page 47) - Issues with CSS (Page 47) - When CSS makes sense (Page 48) - Code technique: Separate styling from logic (Page 49) - Standard approach (Page 49) - Optimized approach (Page 50) - Code technique: Organize sequenced animations (Page 53) - Standard approach (Page 53) - Optimized approach (Page 54) - Code technique: Package your effects (Page 56) - Standard approach (Page 56) - Optimized approach (Page 56) - Design techniques (Page 59) - Timing multipliers (Page 59) - Use Velocity Motion Designer (Page 60) - Wrapping up (Page 61) - Chapter 5. Animating Text (Page 62) - The standard approach to text animation (Page 62) - Preparing text elements for animation with Blast.js (Page 63) - How Blast.js works (Page 64) - Installation (Page 65) - Option: Delimiter (Page 66) - Option: customClass (Page 66) - Option: generateValueClass (Page 66) - Option: Tag (Page 68) - Command: Reverse (Page 68) - Transitioning text into or out of view (Page 69) - Replacing existing text (Page 69) - Staggering (Page 70) - Transitioning text out of view (Page 70) - Transitioning individual text parts (Page 71) - Transitioning text fancifully (Page 72) - Textual flourishes (Page 73) - Wrapping up (Page 74) - Chapter 6. Scalable Vector Graphics Primer (Page 76) - Creating images through code (Page 76) - SVG markup (Page 76) - SVG styling (Page 77) - Support for SVG (Page 78) - SVG animation (Page 78) - Passing in properties (Page 78) - Presentational attributes (Page 79) - Positional attributes vs. transforms (Page 79) - Implementation example: Animated logos (Page 80) - Wrapping up (Page 81) - Chapter 7. Animation Performance (Page 82) - The reality of web performance (Page 82) - Technique: Remove layout thrashing (Page 84) - Problem (Page 84) - Solution (Page 84) - jQuery Element Objects (Page 85) - Force-feeding (Page 86) - Technique: Batch DOM additions (Page 87) - Problem (Page 88) - Solution (Page 89) - Technique: Avoid affecting neighboring elements (Page 90) - Problem (Page 90) - Solution (Page 90) - Technique: Reduce concurrent load (Page 91) - Problem (Page 91) - Solution (Page 92) - Technique: Don’t continuously react to scroll and resize events (Page 93) - Problem (Page 93) - Solution (Page 93) - Technique: Reduce image rendering (Page 94) - Problem (Page 94) - Solution (Page 94) - Sneaky images (Page 95) - Technique: Degrade animations on older browsers (Page 95) - Problem (Page 96) - Solution (Page 96) - Find your performance threshold early on (Page 97) - Wrapping up (Page 99) - Chapter 8. Animation Demo (Page 100) - Behavior (Page 100) - Code structure (Page 102) - Code section: Animation setup (Page 104) - Code section: Circle creation (Page 105) - Code section: Container animation (Page 105) - 3D CSS primer (Page 105) - Properties (Page 106) - Options (Page 107) - Code section: Circle animation (Page 108) - Value functions (Page 108) - Opacity animation (Page 109) - Translation animation (Page 109) - Reverse command (Page 110) - Wrapping up (Page 111) - Index (Page 113) - Code Snippets (Page 134)