Creating Web Animations

Bringing Your UIs to Life

Kirupa Chinnathambi (Autor)

Buch | Softcover

210 Seiten

2017
O'Reilly Media (Verlag)
978-1-4919-5751-6 (ISBN)

Artikel merken

Creating user interfaces that are fun, practical, fluid, and memorable is hard. And existing learning materials don't explain the context of the UI problem that animations are trying to solve. That's where this book comes in.

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

Kirupa Chinnathambi has spent most of his life trying to teach others to love web development as much as he does. In 1999, before blogging was even a word, he started posting tutorials on kirupa.com. In the years since then, he has written hundreds of articles, written a few books (none as good as the one he hopes to write for O Reilly), recorded a bunch of videos you can find on YouTube, and even worked for a long time on helping improve the state of HTML tooling at Microsoft. When he isn't writing or talking about web development, he is probably sleeping...or writing about himself in 3rd person."

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

Erscheinungsdatum	01.04.2017
Verlagsort	Sebastopol
Sprache	englisch
Maße	166 x 227 mm
Gewicht	310 g
Einbandart	kartoniert
Themenwelt	Informatik ► Grafik / Design ► Film- / Video-Bearbeitung
	Informatik ► Software Entwicklung ► User Interfaces (HCI)
	Informatik ► Web / Internet ► Web Design / Usability
Schlagworte	CSS3 (Cascading Style Sheets) • CSS Animations • user interface • Webanimation
ISBN-10	1-4919-5751-4 / 1491957514
ISBN-13	978-1-4919-5751-6 / 9781491957516
Zustand	Neuware