redradix weekend: animando sitios web
TRANSCRIPT
ANIMANDO SITIOS WEB
!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
DAR VIDA A ELEMENTOS NO SIMPLEMENTE MOVERLOS. !
ENRIQUECE LA COMUNICACIÓN SIN DISPERSAR EL MENSAJE !
ANIMACIÓN
!4
LA COMUNICACIÓN ES MÁS: - SENCILLA - RÁPIDA - DIRECTA !
APPEAL NO QUEREMOS CIRCO
ANIMACIÓN
milwaukeepolicenews.com
!5
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
LOS 12 PRINCIPIOS
!6
PRESENTACIÓN DE LA IDEA
STAGING
cabletv.com/the-walking-dead
!7
EL TIEMPO QUE DURA LA ANIMACIÓN Y CUÁNDO SE PRODUCEN LAS ACCIONES
TIMING
!8
LA DISTANCIA QUE SE RECORRE EN LA ANIMACIÓN
SPACING
!9
DEFORMACIÓN DE LOS OBJETOS SQUASH -> COMPRIMIR STRETCH -> ALARGAR
SQUASH AND STRETCH
!10
LA ACCIÓN QUE PREPARA AL ESPECTADOR PARA UNA ANIMACIÓN POSTERIOR
ANTICIPATION
!11
ACELERACIÓN Y FRENADA - SALIDA (IN) - LLEGADA (OUT) !
GENERA MOVIMIENTOS MÁS REALISTAS
EASING
gsgd.co.uk/sandbox/jquery/easing/
!12
TRAYECTORIA CURVAS !
ORGÁNICOS VS. MECÁNICOS
ARCS
!13
STRAIGHT AHEAD ANIMACIÓN CONSECUTIVA !
POSE TO POSE INICIO, FINAL, PARTES INTERMEDIAS
STRAIGHT AHEADPOSE TO POSE
!14
EFECTO SECUNDARIO QUE ES ARRASTRADO POR LA ACCIÓN PRINCIPAL
FOLLOW THROUGHAND OVERLAP
!15
COMPLEMENTA LA ACCIÓN PRINCIPAL !
RELLENAR EL FOTOGRAMA
SECONDARY ACTION
!16
TIMING SPACING SQUASH AND STRETCH ANTICIPATION EASING !
ANIMACIÓN
!17
!
!
EL MENSAJE DEBE SEGUIR FUNCIONANDO AUNQUE NO HAYA ANIMACIÓN
ANIMACIÓN
PARALLAX
!19
MOVER ELEMENTOS
A DIFERENTES VELOCIDADES
PARA GENERAR
UN EFECTO ÓPTICO DE PROFUNDIDAD.
!20
LOS OBJETOS MÁS ALEJADOS SE MUEVEN MÁS DESPACIO
MIENTRAS QUE
LOS OBJETOS CERCANOS AL ESPECTADOR, LO HACEN MÁS RÁPIDO.
PARALLAX
!21
NECESITAMOS OBTENER UNA VELOCIDAD BASE !
EMPLEAMOS EL SCROLL DEL BROWSER
PARALLAX
// var valorScroll = $(‘html,body’).scrollTop(); var valorScroll = $('html').scrollTop() || $('body').scrollTop()
!22
LA VELOCIDAD BASE NOS SIRVE PARA RALENTIZAR EL MOVIMIENTO DE LOS OBJETOS ALEJADOS
PARALLAX
$(‘.fondo’).css({ top: valorScroll * 0.6 }); $(‘.primer-plano’).css({ top: valorScroll * 0.3 });
!23
CUANTO MÁS ALTO SEA EL MULTIPLICADOR, MÁS LENTO SERÁ EL MOVIMIENTO.
PARALLAX
$(‘.fondo’).css({ top: valorScroll * 0.6 }); $(‘.primer-plano’).css({ top: valorScroll * 0.3 });
!24
SI EMPLEAMOS EL MISMO VALOR QUE LA VELOCIDAD BASE PARA MOVER EN SENTIDO CONTRARIO ”CONGELAMOS” EL ELEMENTO
PARALLAX
// position:fixed sin CSS $(‘.fondo’).css({ top: valorScroll });
!25
!
SI ALGUNO DE LOS ELEMENTOS NO TIENE UNA ALTURA MAYOR QUE LA VENTANA SE PIERDE IMAGEN DE FONDO.
PARALLAXCONSIDERACIONES
!26PARALLAX
CSS
JS
background-repeat: repeat-y;
// load, resize Events $('.parallax').each(function (){ if ( $(this).height() < $(window).height() ){ $(this).css({ height:$(window).height() }); } });
CONSIDERACIONES
!27
!
CADA ELEMENTO DEBE CORREGIR SU MOVIMIENTO DEPENDIENDO DE SU POSICIÓN EN EL BROWSER
PARALLAXCONSIDERACIONES
$(this).css({ top:(valorScroll - $(this).offset().top) * 0.6 });
DEMO
GREYGOOSE
PROFUNDIDAD
!30
CAMBIAR LA ESCALA DE LOS OBJETOS PARA GENERAR UN EFECTO DE ZOOM !
!
TRAVELING COMPENSADO
PROFUNDIDAD
!31PROFUNDIDAD
nytimes.com/projects/2013/tomato-can-blues
!32
VOLVEMOS A EMPLEAR EL SCROLL COMO VELOCIDAD BASE
PROFUNDIDAD
var valorScroll = $('html, body').scrollTop()
!33PROFUNDIDAD
valorScroll = $('html, body').scrollTop(); valorEscala = 1+(scrollValue/1000); // 1 = 100% $('.item').css({ transform: 'scale('+scaleValue+') });
MODIFICAMOS LA ESCALA DE LOS ELEMENTOS
!34
!
LIMITAR LAS ESCALAS DE LOS ELEMENTOS UNA VEZ VISTAS !
EL HECHO DE QUE NO SE VEAN NO SIGNIFICA QUE NO SE PINTEN
PROFUNDIDADCONSIDERACIONES
TRANSITION TRANSFORM @ANIMATION
!36
TRANSITION Y TRANSFORM!! !
ANIMACIÓN DE ELEMENTOS POR MEDIO DE EVENTOS !
ENRIQUECEN LA EXPERIENCIA COMUNICACIÓN MEJOR
@ANIMATION
!37@ANIMATION
apple.com/es/macbook-pro/features-retina/
!38@ANIMATION
teamtreehouse.com/
!39
ACTIVACIÓN MEDIANTE CLASES
@ANIMATION
.item{ animation-play-state: paused; } // por defecto
.play{ animation-play-state: running; } CSS
JSfunction anima(){ $('.item').addClass('play'); // o .toggleClass() }
MOBILE
!41
!
DISPOSITIVOS TÁCTILES NO EXISTE EL EVENTO SCROLL* !
APAÑO BOTONES
MOBILECONSIDERACIONES
!42
!
EVENTOS TÁCTILES SENSORES !
!
MISMA LÓGICA DISTINTO INPUT
MOBILE
!43
TOUCHSTART TOUCHMOVE TOUCHSTOP !
!
TOUCHES E.PAGEX E.PAGEY
TOUCH
document.addEventListener('touchmove', move); !function move(e){ fingers = e.touches; posX = fingers[0].pageX; posY = fingers[0].pageY;
}
!44
TOUCHSTART TOUCHMOVE TOUCHSTOP !
!
TOUCHES E.PAGEX E.PAGEY
TOUCH
document.addEventListener('touchmove', move); !function move(e){ fingers = e.touches; posX = fingers[0].pageX; posY = fingers[0].pageY;
}
is.gd/BwvKT6
!45
DEVICEORIENTATION ORIENTATIONCHANGE
GYROSCOPE
window.addEventListener('deviceorientation', compass); !function compass(e){ rotationX = e.beta; rotationY = e.gamma; rotationZ = e.alpha;
}
!46
DEVICEORIENTATION ORIENTATIONCHANGE
GYROSCOPE
window.addEventListener('deviceorientation', compass); !function compass(e){ rotationX = e.beta; rotationY = e.gamma; rotationZ = e.alpha;
}
is.gd/szVkG2
UN PASO MÁS...
IE SCHOOL