Creating Web Animations. Bringing Your UIs to Life

Spis treści ebooka

• Preface
  • Know Your Basic HTML, CSS, and JavaScript
  • About Authoring Tools
  • Using the Code Examples
  • OReilly Safari
  • Getting Help/Contacting the Author
    • Contacting OReilly
  • Acknowledgments
• I. The Basics
• 1. Introduction to Web Animations
  • What Is an Animation?
    • The Start and End States
    • Interpolation
    • Animations on the Web
      • CSS animations (aka keyframe animations)
      • CSS transitions
      • Scripted/JavaScript animations
    • Conclusion
• 2. Introduction to CSS Animations
  • Creating a Simple Animation
  • What Just Happened
    • The Name
    • Duration and Keyframes
    • Looping
  • The Longhand Version
  • Conclusion
• 3. Introduction to CSS Transitions
  • Creating a Simple Transition
  • What Just Happened
  • The Longhand Version
  • Conclusion
• 4. Working with CSS Timing Functions
  • What Is a Timing Function?
  • Timing Functions in CSS
    • Timing Functions in CSS Animations
    • Timing Functions in CSS Transitions
    • Meet the Timing Function Curve
    • The cubic-bezier Timing Function
    • The step Timing Function
  • Conclusion
• 5. Ensuring Your Animations Run Really Smoothly
  • What Is a Smooth Animation?
  • Creating Responsive 60 fps Animations
    • Meet the Animation-Friendly Properties
    • Push Element Rendering to the GPU
      • Minimize the elements you want the GPU to deal with
      • Give your browser a chance to push an element to the GPU
  • Conclusion
• 6. Transitions, Animations, and JavaScript
  • Its Just Property Changes
    • The Example
    • Initial State Using CSS, Changes Using JS
      • Initial state and CSS
      • Changes and JavaScript
    • What Just Happened?
  • A Tale of Two Styling Approaches
    • Setting the Style Directly
    • Adding and Removing Classes Using JavaScript
  • Animating with requestAnimationFrame
  • Conclusion
• 7. CSS Animations Versus CSS Transitions
  • Similarities
  • Differences
    • Triggering
    • Looping
    • Defining Intermediate Points/Keyframes
    • Specifying Properties Up Front
    • Interaction with JavaScript
  • Conclusion
• II. Learning from Examples
• 8. Animating Your Links to Life
  • The Starting Point
  • Animated Underline
  • Simple Background Color Change
  • Cooler Background Color Change
  • Conclusion
• 9. Simple Text Fade and Scale Animation
  • The Example
    • The CSS Animation
    • The Easing Function
  • Conclusion
• 10. Creating a Smooth Sliding Menu
  • How the Sliding Menu Works
  • Creating the Sliding Menu
    • The Initial Page
    • Adding the Menu
    • Making the Menu Work
      • Listening to events
      • Showing the menu
      • Hiding the menu
    • Adding Some Finishing Touches
      • Dealing with scrolling
      • Ensuring our menu appears above everything else
  • Conclusion
• 11. Scroll-Activated Animations
  • The Basic Idea
    • The Content
    • Its Scrolling Time
    • Identifying the Elements
    • Modifying the Elements
  • Building It All Out
    • Listening to the Scroll Event
    • Detecting When Elements Are Visible
      • Detecting whether an element is partially visible
      • Detecting whether an element is fully visible
    • Putting It All Together
    • Some Performance Considerations
  • Conclusion
• 12. The iOS Icon Wobble/Jiggle
  • The Full HTML and CSS
  • Deconstructing This Effect
  • Looking at the CSS
  • Faking Randomness
    • Slightly Different Variants of Style Rules + Keyframes
    • Altering Some CSS Properties and Their ValuesInline!
  • Conclusion
• 13. Parallax Scrolling
  • Overview of How the Parallax Effect Works
  • Getting Started
    • Adding Our Background Elements
    • The JavaScript
      • Referencing our background elements
      • Setting the Position
      • Getting the scroll position
  • Conclusion
• 14. Sprite Sheet Animations Using Only CSS
  • Creating the Sprite Sheet
    • The Actual Implementation
      • The HTML element
      • Properly sizing the HTML element
      • Setting the background image
    • Its Animation Time
    • The Steps Easing Function in Action
  • Conclusion
• 15. Creating a Sweet Content Slider
  • Overview of How It Works
  • The Content
    • The Content (For Realz This Time)
    • What You Just Did
  • Clipping the Content
  • The Navigation Links
  • Making the Content Actually Slide
    • Adding the JavaScript
    • Adding the Transition
  • Understanding the Code (and More!)
    • Whats Really Going On
    • The Role of the data-pos Attribute
    • Its All About the JavaScript
      • Toggling the visuals of the clicked/active link
      • Setting the position of the wrapper
  • Conclusion
• 16. Conclusion
  • Until Next Time
• Index

pokaż cały spis treści

ukryj recenzje