redradix weekend: animando sitios web

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