Librería Portfolio

Thanks to faster browsers, better web standards support, and more powerful devices, the web now defines the next generation of user interfaces that are fun, practical, fluid, and memorable. The key? Animation. But learning how to create animations is hard, and existing learning material doesn't explain the context of the UI problem that animations are trying to solve. That's where this book comes in.

You´ll gain a solid technical understanding of how to create awesome animations using CSS and learn how to implement common UI patterns, using practical examples that rely on animations to solve a core problem. Frontend web developers and designers will not only learn important technical details, but also how to apply them to solve real-world problems.

Create animations found in common user interface implementations, such as bounce after scrolling, expanding search boxes, and content sliders
Learn the technical details of working with CSS animations and transitions
Use CSS transforms to very animate an element's position, scale, and orientation
Understand the importance of easing



The Basics
Chapter 1Introduction to Web Animations
What Is an Animation?
Chapter 2Introduction to CSS Animations
Creating a Simple Animation
What Just Happened
The Longhand Version
Conclusion
Chapter 3Introduction to CSS Transitions
Creating a Simple Transition
What Just Happened
The Longhand Version
Conclusion
Chapter 4Working with CSS Timing Functions
What Is a Timing Function?
Timing Functions in CSS
Conclusion
Chapter 5Ensuring Your Animations Run Really Smoothly
What Is a Smooth Animation?
Creating Responsive 60 fps Animations
Conclusion
Chapter 6Transitions, Animations, and JavaScript
It's Just Property Changes
A Tale of Two Styling Approaches
Animating with requestAnimationFrame
Conclusion
Chapter 7CSS Animations Versus CSS Transitions
Similarities
Differences
Conclusion
Learning from Examples
Chapter 8Animating Your Links to Life
The Starting Point
Animated Underline
Simple Background Color Change
Cooler Background Color Change
Conclusion
Chapter 9Simple Text Fade and Scale Animation
The Example
Conclusion
Chapter 10Creating a Smooth Sliding Menu
How the Sliding Menu Works
Creating the Sliding Menu
Conclusion
Chapter 11Scroll-Activated Animations
The Basic Idea
Building It All Out
Conclusion
Chapter 12The iOS Icon Wobble/Jiggle
The Full HTML and CSS
Deconstructing This Effect
Looking at the CSS
Faking Randomness
Conclusion
Chapter 13Parallax Scrolling
Overview of How the Parallax Effect Works
Getting Started
Conclusion
Chapter 14Sprite Sheet Animations Using Only CSS
Creating the Sprite Sheet
Conclusion
Chapter 15Creating a Sweet Content Slider
Overview of How It Works
The Content
Clipping the Content
The Navigation Links
Making the Content Actually Slide
Understanding the Code (and More!)
Conclusion
Chapter 16Conclusion
Until Next Time