ANIMANDO
SITIOS WEB
!2

...THEY WERE SIMPLE DESK LAMPS WITH
ONLY A MINIMAL AMOUNT OF MOVEMENT,
BUT YOU COULD IMMEDIATELY TELL THAT
LUXO JR. WA...
ANIMACIÓN
DAR VIDA A ELEMENTOS
NO SIMPLEMENTE MOVERLOS.
!

ENRIQUECE LA COMUNICACIÓN
SIN DISPERSAR EL MENSAJE
!

!3
ANIMACIÓN

!4

LA COMUNICACIÓN ES MÁS:
- SENCILLA
- RÁPIDA
- DIRECTA
!

APPEAL NO QUEREMOS CIRCO
milwaukeepolicenews.com
LOS 12 PRINCIPIOS
1. STAGING
2. TIMING
3. SPACING
4. SQUASH AND STRETCH
5. ANTICIPATION
6. EASING
7. ARCS
8. EXAGERATION
9...
STAGING
PRESENTACIÓN
DE LA IDEA

cabletv.com/the-walking-dead

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

!7
SPACING
LA DISTANCIA QUE SE RECORRE
EN LA ANIMACIÓN

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

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

!10
EASING
ACELERACIÓN Y FRENADA
- SALIDA (IN)
- LLEGADA (OUT)
!

GENERA MOVIMIENTOS MÁS REALISTAS
gsgd.co.uk/sandbox/jquery/e...
ARCS
TRAYECTORIA CURVAS
!

ORGÁNICOS VS. MECÁNICOS

!12
STRAIGHT AHEAD
POSE TO POSE
STRAIGHT AHEAD
ANIMACIÓN CONSECUTIVA
!

POSE TO POSE
INICIO, FINAL, PARTES INTERMEDIAS

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

!14
SECONDARY ACTION
COMPLEMENTA
LA ACCIÓN PRINCIPAL
!

RELLENAR EL FOTOGRAMA

!15
ANIMACIÓN
TIMING
SPACING
SQUASH AND STRETCH
ANTICIPATION
EASING
!

!16
ANIMACIÓN
!
!

EL MENSAJE DEBE
SEGUIR FUNCIONANDO
AUNQUE NO HAYA ANIMACIÓN

!17
PARALLAX
!19

MOVER ELEMENTOS
A DIFERENTES VELOCIDADES
PARA GENERAR
UN EFECTO ÓPTICO DE PROFUNDIDAD.
PARALLAX
LOS OBJETOS MÁS ALEJADOS
SE MUEVEN MÁS DESPACIO
MIENTRAS QUE
LOS OBJETOS CERCANOS AL
ESPECTADOR,
LO HACEN MÁS RÁP...
PARALLAX
NECESITAMOS OBTENER UNA
VELOCIDAD BASE
!

EMPLEAMOS EL SCROLL DEL
BROWSER
// var valorScroll = $(‘html,body’).scr...
PARALLAX
LA VELOCIDAD BASE NOS SIRVE
PARA RALENTIZAR EL
MOVIMIENTO DE LOS OBJETOS
ALEJADOS
$(‘.fondo’).css({ top: valorScr...
PARALLAX
CUANTO MÁS ALTO SEA EL
MULTIPLICADOR, MÁS LENTO
SERÁ EL MOVIMIENTO.

$(‘.fondo’).css({ top: valorScroll * 0.6 });...
PARALLAX
SI EMPLEAMOS EL MISMO VALOR
QUE LA VELOCIDAD BASE PARA
MOVER EN SENTIDO CONTRARIO
”CONGELAMOS” EL ELEMENTO
// pos...
PARALLAX

CONSIDERACIONES
!

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

!26

CONSIDERACIONES
background-repeat: repeat-y;

CSS

// load, resize Events
$('.parallax').each(function (){
...
PARALLAX

CONSIDERACIONES
!

CADA ELEMENTO DEBE
CORREGIR SU MOVIMIENTO
DEPENDIENDO DE SU POSICIÓN
EN EL BROWSER
$(this).cs...
DEMO

GREYGOOSE
PROFUNDIDAD
PROFUNDIDAD
CAMBIAR LA ESCALA DE LOS
OBJETOS PARA GENERAR UN
EFECTO DE ZOOM
!
!

TRAVELING COMPENSADO

!30
PROFUNDIDAD

!31

nytimes.com/projects/2013/
tomato-can-blues
PROFUNDIDAD
VOLVEMOS A EMPLEAR EL
SCROLL COMO
VELOCIDAD BASE

var valorScroll = $('html, body').scrollTop()

!32
PROFUNDIDAD
MODIFICAMOS LA ESCALA
DE LOS ELEMENTOS

valorScroll = $('html, body').scrollTop();
valorEscala = 1+(scrollValu...
PROFUNDIDAD
CONSIDERACIONES
!

LIMITAR LAS ESCALAS DE LOS
ELEMENTOS UNA VEZ VISTAS
!

EL HECHO DE QUE NO SE VEAN
NO SIGNIF...
TRANSITION
TRANSFORM
@ANIMATION
@ANIMATION
TRANSITION Y TRANSFORM!!
!

ANIMACIÓN DE ELEMENTOS
POR MEDIO DE EVENTOS
!

ENRIQUECEN LA EXPERIENCIA
COMUNICACI...
@ANIMATION

!37

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

teamtreehouse.com/

!38
@ANIMATION

!39

ACTIVACIÓN MEDIANTE CLASES
.item{ animation-play-state: paused; } // por defecto
.play{ animation-play-st...
MOBILE
MOBILE

CONSIDERACIONES
!

DISPOSITIVOS TÁCTILES
NO EXISTE EL EVENTO SCROLL*
!

APAÑO BOTONES

!41
MOBILE
!

EVENTOS TÁCTILES
SENSORES
!
!

MISMA LÓGICA DISTINTO INPUT

!42
TOUCH

!43

TOUCHSTART
TOUCHMOVE
TOUCHSTOP
!
!

TOUCHES
E.PAGEX
E.PAGEY

document.addEventListener('touchmove', move);
!

...
TOUCH

!44

TOUCHSTART
TOUCHMOVE
TOUCHSTOP

is.gd/BwvKT6

!
!

TOUCHES
E.PAGEX
E.PAGEY

document.addEventListener('touchmo...
GYROSCOPE

!45

DEVICEORIENTATION
ORIENTATIONCHANGE
window.addEventListener('deviceorientation', compass);
!

function com...
GYROSCOPE
DEVICEORIENTATION
ORIENTATIONCHANGE

!46

is.gd/szVkG2

window.addEventListener('deviceorientation', compass);
!...
UN PASO MÁS...
IE SCHOOL
Upcoming SlideShare
Loading in …5
×

Redradix Weekend: Animando sitios web

927 views

Published on

Documentación charla "Animando sitios Web" #RedradixWeekend

Published in: Technology
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
927
On SlideShare
0
From Embeds
0
Number of Embeds
31
Actions
Shares
0
Downloads
30
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

Redradix Weekend: Animando sitios web

  1. 1. ANIMANDO SITIOS WEB
  2. 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. 3. ANIMACIÓN DAR VIDA A ELEMENTOS NO SIMPLEMENTE MOVERLOS. ! ENRIQUECE LA COMUNICACIÓN SIN DISPERSAR EL MENSAJE ! !3
  4. 4. ANIMACIÓN !4 LA COMUNICACIÓN ES MÁS: - SENCILLA - RÁPIDA - DIRECTA ! APPEAL NO QUEREMOS CIRCO milwaukeepolicenews.com
  5. 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. 6. STAGING PRESENTACIÓN DE LA IDEA cabletv.com/the-walking-dead !6
  7. 7. TIMING EL TIEMPO QUE DURA LA ANIMACIÓN Y CUÁNDO SE PRODUCEN LAS ACCIONES !7
  8. 8. SPACING LA DISTANCIA QUE SE RECORRE EN LA ANIMACIÓN !8
  9. 9. SQUASH AND STRETCH DEFORMACIÓN DE LOS OBJETOS SQUASH -> COMPRIMIR STRETCH -> ALARGAR !9
  10. 10. ANTICIPATION LA ACCIÓN QUE PREPARA AL ESPECTADOR PARA UNA ANIMACIÓN POSTERIOR !10
  11. 11. EASING ACELERACIÓN Y FRENADA - SALIDA (IN) - LLEGADA (OUT) ! GENERA MOVIMIENTOS MÁS REALISTAS gsgd.co.uk/sandbox/jquery/easing/ !11
  12. 12. ARCS TRAYECTORIA CURVAS ! ORGÁNICOS VS. MECÁNICOS !12
  13. 13. STRAIGHT AHEAD POSE TO POSE STRAIGHT AHEAD ANIMACIÓN CONSECUTIVA ! POSE TO POSE INICIO, FINAL, PARTES INTERMEDIAS !13
  14. 14. FOLLOW THROUGH AND OVERLAP EFECTO SECUNDARIO QUE ES ARRASTRADO POR LA ACCIÓN PRINCIPAL !14
  15. 15. SECONDARY ACTION COMPLEMENTA LA ACCIÓN PRINCIPAL ! RELLENAR EL FOTOGRAMA !15
  16. 16. ANIMACIÓN TIMING SPACING SQUASH AND STRETCH ANTICIPATION EASING ! !16
  17. 17. ANIMACIÓN ! ! EL MENSAJE DEBE SEGUIR FUNCIONANDO AUNQUE NO HAYA ANIMACIÓN !17
  18. 18. PARALLAX
  19. 19. !19 MOVER ELEMENTOS A DIFERENTES VELOCIDADES PARA GENERAR UN EFECTO ÓPTICO DE PROFUNDIDAD.
  20. 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. 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. 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. 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. 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. 25. PARALLAX CONSIDERACIONES ! SI ALGUNO DE LOS ELEMENTOS NO TIENE UNA ALTURA MAYOR QUE LA VENTANA SE PIERDE IMAGEN DE FONDO. !25
  26. 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. 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. 28. DEMO GREYGOOSE
  29. 29. PROFUNDIDAD
  30. 30. PROFUNDIDAD CAMBIAR LA ESCALA DE LOS OBJETOS PARA GENERAR UN EFECTO DE ZOOM ! ! TRAVELING COMPENSADO !30
  31. 31. PROFUNDIDAD !31 nytimes.com/projects/2013/ tomato-can-blues
  32. 32. PROFUNDIDAD VOLVEMOS A EMPLEAR EL SCROLL COMO VELOCIDAD BASE var valorScroll = $('html, body').scrollTop() !32
  33. 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. 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. 35. TRANSITION TRANSFORM @ANIMATION
  36. 36. @ANIMATION TRANSITION Y TRANSFORM!! ! ANIMACIÓN DE ELEMENTOS POR MEDIO DE EVENTOS ! ENRIQUECEN LA EXPERIENCIA COMUNICACIÓN MEJOR !36
  37. 37. @ANIMATION !37 apple.com/es/macbook-pro/ features-retina/
  38. 38. @ANIMATION teamtreehouse.com/ !38
  39. 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. 40. MOBILE
  41. 41. MOBILE CONSIDERACIONES ! DISPOSITIVOS TÁCTILES NO EXISTE EL EVENTO SCROLL* ! APAÑO BOTONES !41
  42. 42. MOBILE ! EVENTOS TÁCTILES SENSORES ! ! MISMA LÓGICA DISTINTO INPUT !42
  43. 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. 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. 45. GYROSCOPE !45 DEVICEORIENTATION ORIENTATIONCHANGE window.addEventListener('deviceorientation', compass); ! function compass(e){ rotationX = e.beta; rotationY = e.gamma; rotationZ = e.alpha; }
  46. 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. 47. UN PASO MÁS...
  48. 48. IE SCHOOL

×