
Creating Web Animations
Description
Alles über E-Books | Antworten auf Fragen rund um E-Books, Kopierschutz und Dateiformate finden Sie in unserem Info- & Hilfebereich.
More details
Other editions
Additional editions

Content
- Intro
- Copyright
- Table of Contents
- Preface
- Know Your Basic HTML, CSS, and JavaScript
- About Authoring Tools
- Using the Code Examples
- O'Reilly Safari
- Getting Help/Contacting the Author
- Contacting O'Reilly
- Acknowledgments
- Part I. The Basics
- Chapter 1. Introduction to Web Animations
- What Is an Animation?
- The Start and End States
- Interpolation
- Animations on the Web
- Conclusion
- Chapter 2. Introduction to CSS Animations
- Creating a Simple Animation
- What Just Happened
- The Name
- Duration and Keyframes
- Looping
- The Longhand Version
- Conclusion
- Chapter 3. Introduction to CSS Transitions
- Creating a Simple Transition
- What Just Happened
- The Longhand Version
- Conclusion
- Chapter 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
- Chapter 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
- Conclusion
- Chapter 6. Transitions, Animations, and JavaScript
- It's Just Property Changes
- The Example
- Initial State Using CSS, Changes Using JS
- What Just Happened?
- A Tale of Two Styling Approaches
- Setting the Style Directly
- Adding and Removing Classes Using JavaScript
- Animating with requestAnimationFrame
- Conclusion
- Chapter 7. CSS Animations Versus CSS Transitions
- Similarities
- Differences
- Triggering
- Looping
- Defining Intermediate Points/Keyframes
- Specifying Properties Up Front
- Interaction with JavaScript
- Conclusion
- Part II. Learning from Examples
- Chapter 8. Animating Your Links to Life
- The Starting Point
- Animated Underline
- Simple Background Color Change
- Cooler Background Color Change
- Conclusion
- Chapter 9. Simple Text Fade and Scale Animation
- The Example
- The CSS Animation
- The Easing Function
- Conclusion
- Chapter 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
- Adding Some Finishing Touches
- Conclusion
- Chapter 11. Scroll-Activated Animations
- The Basic Idea
- The Content
- It's Scrolling Time
- Identifying the Elements
- Modifying the Elements
- Building It All Out
- Listening to the Scroll Event
- Detecting When Elements Are Visible
- Putting It All Together
- Some Performance Considerations
- Conclusion
- Chapter 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 Values.Inline!
- Conclusion
- Chapter 13. Parallax Scrolling
- Overview of How the Parallax Effect Works
- Getting Started
- Adding Our Background Elements
- The JavaScript
- Conclusion
- Chapter 14. Sprite Sheet Animations Using Only CSS
- Creating the Sprite Sheet
- The Actual Implementation
- It's Animation Time
- The Steps Easing Function in Action
- Conclusion
- Chapter 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!)
- What's Really Going On
- The Role of the data-pos Attribute
- It's All About the JavaScript
- Conclusion
- Chapter 16. Conclusion
- Until Next Time
- Index
- About the Author
- Colophon
System requirements
File format: PDF
Copy-Protection: Adobe-DRM (Digital Rights Management)
System requirements:
- Computer (Windows; MacOS X; Linux): Install the free reader Adobe Digital Editions prior to download (see eBook Help).
- Tablet/smartphone (Android; iOS): Install the free app Adobe Digital Editions or the app PocketBook before downloading (see eBook Help).
- E-reader: Bookeen, Kobo, Pocketbook, Sony, Tolino and many more (only limited: Kindle).
The file format PDF always displays a book page identically on any hardware. This makes PDF suitable for complex layouts such as those used in textbooks and reference books (images, tables, columns, footnotes). Unfortunately, on the small screens of e-readers or smartphones, PDFs are rather annoying, requiring too much scrolling.
This eBook uses Adobe-DRM, a „hard” copy protection. If the necessary requirements are not met, unfortunately you will not be able to open the eBook. You will therefore need to prepare your reading hardware before downloading.
Please note: We strongly recommend that you authorise using your personal Adobe ID after installation of any reading software.
For more information, see our eBook Help page.