El documento describe diferentes técnicas de animación para sitios web, incluyendo los 12 principios de la animación, paralaje, profundidad, transiciones y animaciones. Explica cómo aplicar estas técnicas para mejorar la comunicación en sitios web y hacerla más sencilla, rápida y directa. También cubre consideraciones para la animación en dispositivos móviles que usan controles táctiles en lugar de scroll.

1. ANIMANDO
SITIOS WEB

2. !2
...THEY WERE SIMPLE DESK LAMPS WITH
ONLY A MINIMAL AMOUNT OF MOVEMENT,
BUT YOU COULD IMMEDIATELY TELL THAT
LUXO JR. WAS A BABY, AND THAT THE BIG
ONE WAS HIS MOTHER...
!
— JOHN LASSETER

3. ANIMACIÓN
DAR VIDA A ELEMENTOS
NO SIMPLEMENTE MOVERLOS.
!
ENRIQUECE LA COMUNICACIÓN
SIN DISPERSAR EL MENSAJE
!
!3

4. ANIMACIÓN
!4
LA COMUNICACIÓN ES MÁS:
- SENCILLA
- RÁPIDA
- DIRECTA
!
APPEAL NO QUEREMOS CIRCO
milwaukeepolicenews.com

5. LOS 12 PRINCIPIOS
1. STAGING
2. TIMING
3. SPACING
4. SQUASH AND STRETCH
5. ANTICIPATION
6. EASING
7. ARCS
8. EXAGERATION
9. STRAIGHT AHEAD / POSE TO POSE
10. FOLLOW THROUGH AND OVERLAPPING
11. SECONDARY ACTION
12. APPEAL
!5

6. STAGING
PRESENTACIÓN
DE LA IDEA
cabletv.com/the-walking-dead
!6

7. TIMING
EL TIEMPO QUE DURA LA ANIMACIÓN
Y CUÁNDO SE PRODUCEN LAS ACCIONES
!7

8. SPACING
LA DISTANCIA QUE SE RECORRE
EN LA ANIMACIÓN
!8

9. SQUASH AND STRETCH
DEFORMACIÓN DE LOS OBJETOS
SQUASH -> COMPRIMIR
STRETCH -> ALARGAR
!9

10. ANTICIPATION
LA ACCIÓN QUE
PREPARA AL ESPECTADOR
PARA UNA
ANIMACIÓN POSTERIOR
!10

11. EASING
ACELERACIÓN Y FRENADA
- SALIDA (IN)
- LLEGADA (OUT)
!
GENERA MOVIMIENTOS MÁS REALISTAS
gsgd.co.uk/sandbox/jquery/easing/
!11

12. ARCS
TRAYECTORIA CURVAS
!
ORGÁNICOS VS. MECÁNICOS
!12

13. STRAIGHT AHEAD
POSE TO POSE
STRAIGHT AHEAD
ANIMACIÓN CONSECUTIVA
!
POSE TO POSE
INICIO, FINAL, PARTES INTERMEDIAS
!13

14. FOLLOW THROUGH
AND OVERLAP
EFECTO SECUNDARIO
QUE ES ARRASTRADO
POR LA ACCIÓN PRINCIPAL
!14

15. SECONDARY ACTION
COMPLEMENTA
LA ACCIÓN PRINCIPAL
!
RELLENAR EL FOTOGRAMA
!15

16. ANIMACIÓN
TIMING
SPACING
SQUASH AND STRETCH
ANTICIPATION
EASING
!
!16

17. ANIMACIÓN
!
!
EL MENSAJE DEBE
SEGUIR FUNCIONANDO
AUNQUE NO HAYA ANIMACIÓN
!17

18. PARALLAX

19. !19
MOVER ELEMENTOS
A DIFERENTES VELOCIDADES
PARA GENERAR
UN EFECTO ÓPTICO DE PROFUNDIDAD.

20. PARALLAX
LOS OBJETOS MÁS ALEJADOS
SE MUEVEN MÁS DESPACIO
MIENTRAS QUE
LOS OBJETOS CERCANOS AL
ESPECTADOR,
LO HACEN MÁS RÁPIDO.
!20

21. PARALLAX
NECESITAMOS OBTENER UNA
VELOCIDAD BASE
!
EMPLEAMOS EL SCROLL DEL
BROWSER
// var valorScroll = $(‘html,body’).scrollTop();
var valorScroll = $('html').scrollTop() || $('body').scrollTop()
!21

22. PARALLAX
LA VELOCIDAD BASE NOS SIRVE
PARA RALENTIZAR EL
MOVIMIENTO DE LOS OBJETOS
ALEJADOS
$(‘.fondo’).css({ top: valorScroll * 0.6 });
$(‘.primer-plano’).css({ top: valorScroll * 0.3 });
!22

23. PARALLAX
CUANTO MÁS ALTO SEA EL
MULTIPLICADOR, MÁS LENTO
SERÁ EL MOVIMIENTO.
$(‘.fondo’).css({ top: valorScroll * 0.6 });
$(‘.primer-plano’).css({ top: valorScroll * 0.3 });
!23

24. PARALLAX
SI EMPLEAMOS EL MISMO VALOR
QUE LA VELOCIDAD BASE PARA
MOVER EN SENTIDO CONTRARIO
”CONGELAMOS” EL ELEMENTO
// position:fixed sin CSS
$(‘.fondo’).css({ top: valorScroll });
!24

25. PARALLAX
CONSIDERACIONES
!
SI ALGUNO DE LOS ELEMENTOS
NO TIENE UNA ALTURA
MAYOR QUE LA VENTANA
SE PIERDE IMAGEN DE FONDO.
!25

26. PARALLAX
!26
CONSIDERACIONES
background-repeat: repeat-y;
CSS
// load, resize Events
$('.parallax').each(function (){
if ( $(this).height() < $(window).height() ){
$(this).css({ height:$(window).height() });
}
});
JS

27. PARALLAX
CONSIDERACIONES
!
CADA ELEMENTO DEBE
CORREGIR SU MOVIMIENTO
DEPENDIENDO DE SU POSICIÓN
EN EL BROWSER
$(this).css({ top:(valorScroll - $(this).offset().top) * 0.6 });
!27

28. DEMO
GREYGOOSE

29. PROFUNDIDAD

30. PROFUNDIDAD
CAMBIAR LA ESCALA DE LOS
OBJETOS PARA GENERAR UN
EFECTO DE ZOOM
!
!
TRAVELING COMPENSADO
!30

31. PROFUNDIDAD
!31
nytimes.com/projects/2013/
tomato-can-blues

32. PROFUNDIDAD
VOLVEMOS A EMPLEAR EL
SCROLL COMO
VELOCIDAD BASE
var valorScroll = $('html, body').scrollTop()
!32

33. PROFUNDIDAD
MODIFICAMOS LA ESCALA
DE LOS ELEMENTOS
valorScroll = $('html, body').scrollTop();
valorEscala = 1+(scrollValue/1000); // 1 = 100%
$('.item').css({ transform: 'scale('+scaleValue+') });
!33

34. PROFUNDIDAD
CONSIDERACIONES
!
LIMITAR LAS ESCALAS DE LOS
ELEMENTOS UNA VEZ VISTAS
!
EL HECHO DE QUE NO SE VEAN
NO SIGNIFICA QUE NO SE PINTEN
!34

35. TRANSITION
TRANSFORM
@ANIMATION

36. @ANIMATION
TRANSITION Y TRANSFORM!!
!
ANIMACIÓN DE ELEMENTOS
POR MEDIO DE EVENTOS
!
ENRIQUECEN LA EXPERIENCIA
COMUNICACIÓN MEJOR
!36

37. @ANIMATION
!37
apple.com/es/macbook-pro/
features-retina/

38. @ANIMATION
teamtreehouse.com/
!38

39. @ANIMATION
!39
ACTIVACIÓN MEDIANTE CLASES
.item{ animation-play-state: paused; } // por defecto
.play{ animation-play-state: running; }
JS
CSS
function anima(){
$('.item').addClass('play'); // o .toggleClass()
}

40. MOBILE

41. MOBILE
CONSIDERACIONES
!
DISPOSITIVOS TÁCTILES
NO EXISTE EL EVENTO SCROLL*
!
APAÑO BOTONES
!41

42. MOBILE
!
EVENTOS TÁCTILES
SENSORES
!
!
MISMA LÓGICA DISTINTO INPUT
!42

43. TOUCH
!43
TOUCHSTART
TOUCHMOVE
TOUCHSTOP
!
!
TOUCHES
E.PAGEX
E.PAGEY
document.addEventListener('touchmove', move);
!
function move(e){
fingers = e.touches;
posX = fingers[0].pageX;
posY = fingers[0].pageY;
}

44. TOUCH
!44
TOUCHSTART
TOUCHMOVE
TOUCHSTOP
is.gd/BwvKT6
!
!
TOUCHES
E.PAGEX
E.PAGEY
document.addEventListener('touchmove', move);
!
function move(e){
fingers = e.touches;
posX = fingers[0].pageX;
posY = fingers[0].pageY;
}

45. GYROSCOPE
!45
DEVICEORIENTATION
ORIENTATIONCHANGE
window.addEventListener('deviceorientation', compass);
!
function compass(e){
rotationX = e.beta;
rotationY = e.gamma;
rotationZ = e.alpha;
}

46. GYROSCOPE
DEVICEORIENTATION
ORIENTATIONCHANGE
!46
is.gd/szVkG2
window.addEventListener('deviceorientation', compass);
!
function compass(e){
rotationX = e.beta;
rotationY = e.gamma;
rotationZ = e.alpha;
}

47. UN PASO MÁS...

48. IE SCHOOL