Animationszauber - Geringer Aufwand, Maximale Wirkung

Einfache Animationen via CSS, JS, jQuery

Transcript

1. ANIMATIONSZAUBER GERINGER AUFWAND, MAXIMALE WIRKUNG © 03/2014 Martin W. Kirst / @nitram509
2. Twitter ⋅ Github ⋅ SourceForge UX-Experte Von ASM bis Zope 1k Demos (378 Byte) ♥ HTML + CSS + JS ♥
3. Wirkung Grundlagen Animation Prinzipien CSS Animationen Javascript Animationen Tweens / Tweening AGENDA
4. Konsistenz > Vielfalt PRINZIP
5. Position Rotation Skalierung Transformation WAS?
6. Laufzeit (duration) Verzögerung (delay) Veränderungskurve (easing) WIE?
7. Hands on… EASING
8. EASING « Weitere ... http://easings.net »
9. CSS ANIMATION - EINFACH #rocket { transition: bottom 4s ease-out, left 4s ease-out; } #rocket.start { bottom: 11px; left: -13px; } #rocket.end { bottom: 300px; left: 385px; }
10. CSS ANIMATION - KOMPLEX @keyframes up-and-down { 1% {bottom: 11px; } 50% {bottom: 145px;} 100% {bottom: 11px; } } #rocket { transition: left 4s, ease-out; } #rocket.start { /* ... */ } #rocket.end { animation: up-and-down 4s; left: 385px; }
11. CSS MENÜS
12. CSS BILDER .box { transition: all 500ms cubic-bezier(0.190, 1.000, 0.220, 1.000); box-shadow: 0 1px 1px rgba(0,0,0,0.3); transform: translateY(0) scale(0.95, 0.95); } .box.active { box-shadow: 0 11px 18px rgba(0,0,0,0.2); transform: translateY(-20px) scale(1, 1); } http://aerotwist.com/tutorials/protip-nobody-expects-3d/
13. CSS3 ADVANCED++ http://anthonycalzadilla.com/css3-ATAT/ ⋅ http://codepen.io/Sonick/pen/vijJl ⋅ http://tympanus.net/Tutorials/CreativeCSS3AnimationMenus/
14. NACHTEILE CSS-ANIMATION Nur DOM Keine Interaktion Keine Callbacks wenn fertig Prozentuale Zeitangaben (keyframes)
15. JS - JQUERY BASICS show / hide fadeIn / fadeOut slideUp / slideDown animate (custom properties)
16. JS FADING & SLIDING ToDo List Beispiel
17. CSS BILDER var logo = $('#bedcon-logo'); logo.animate({color: 255}, { duration: 4000, easing: 'swing', step: function (now, tween) { var color = 255 - (now | 0); this.style.backgroundColor = 'rgb('+color+','+color+','+color+')' }, complete: function() { // 2 Sekunden setTimeout() logo[0].style.backgroundColor = '#fff' } });
18. TWEENING Schlüsselbildanimation Bewegung zwischen Keyframes Unabhängig von UI-Technologie
19. CSS BILDER img = document.getElementById("bedcon-tween"); tween1 = new TWEEN.Tween( { x: 10 } ) .to( { x: 190 }, 3000 ) .onUpdate( function () { img.style.left = this.x + 'px'; }); tween1r = new TWEEN.Tween( { r : 0} ) .to( { r: 360 }, 3000) .onUpdate(function () { img.style.transform="rotate("+this.r+"deg)";}); tween2 = new TWEEN.Tween( { y: 270 } ) .to( { y: 10 } ) .easing(TWEEN.Easing.Elastic.InOut) .onUpdate( function () { img.style.bottom = this.y + 'px'; }); tween1.chain(tween2); tween1.start(); tween1r.start();
20. FAZIT JS + CSS >> JS xor CSS Konsistenz >> Vielfalt Einfach => Frameworks Komplex => ...
21. ANIMATION FUN
22. DANKE ⋅ THANKS ⋅ MERCI ©2014 Martin W. Kirst Twitter: @nitram509 ⋅ Github: nitram509 ⋅ x.nitram509@gmail.com http://www.aerotwist.com/lab/ http://johnpolacek.github.io/superscrollorama/ https://medium.com/design-ux/8068a5e4cb82 http://hakim.se/ http://easings.net http://codepen.io/Sonick/pen/vijJl http://anthonycalzadilla.com/css3-ATAT/ http://tympanus.net/Tutorials/CreativeCSS3AnimationMenus/ https://github.com/sole/tween.js/ https://github.com/hakimel/reveal.js http://js1k.com/