Cargando…
Creating web animations : bringing your UIs to life /
Learn how to create animations using CSS and implement common UI patterns, using practical examples that rely on animations to solve a core problem. Front-end web developers and designers will not only learn important technical details, but also how to apply them to solve real-world problems.
| Clasificación: | Libro Electrónico |
|---|---|
| Autor principal: | |
| Formato: | Electrónico eBook |
| Idioma: | Inglés |
| Publicado: |
Sebastopol, CA :
O'Reilly Media,
[2017]
|
| Edición: | First edition. |
| Temas: | |
| Acceso en línea: | Texto completo (Requiere registro previo con correo institucional) |
Tabla de Contenidos:
- 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 TransitionWhat 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 JavaScriptIt'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 PointAnimated 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 EventDetecting 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 & nline!; 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.