redradix weekend: animando sitios web
TRANSCRIPT
![Page 1: Redradix Weekend: Animando sitios web](https://reader033.vdocuments.us/reader033/viewer/2022060204/55a04d2b1a28ab0f0b8b486b/html5/thumbnails/1.jpg)
ANIMANDO SITIOS WEB
![Page 2: Redradix Weekend: Animando sitios web](https://reader033.vdocuments.us/reader033/viewer/2022060204/55a04d2b1a28ab0f0b8b486b/html5/thumbnails/2.jpg)
!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
![Page 3: Redradix Weekend: Animando sitios web](https://reader033.vdocuments.us/reader033/viewer/2022060204/55a04d2b1a28ab0f0b8b486b/html5/thumbnails/3.jpg)
!3
DAR VIDA A ELEMENTOS NO SIMPLEMENTE MOVERLOS. !
ENRIQUECE LA COMUNICACIÓN SIN DISPERSAR EL MENSAJE !
ANIMACIÓN
![Page 4: Redradix Weekend: Animando sitios web](https://reader033.vdocuments.us/reader033/viewer/2022060204/55a04d2b1a28ab0f0b8b486b/html5/thumbnails/4.jpg)
!4
LA COMUNICACIÓN ES MÁS: - SENCILLA - RÁPIDA - DIRECTA !
APPEAL NO QUEREMOS CIRCO
ANIMACIÓN
milwaukeepolicenews.com
![Page 5: Redradix Weekend: Animando sitios web](https://reader033.vdocuments.us/reader033/viewer/2022060204/55a04d2b1a28ab0f0b8b486b/html5/thumbnails/5.jpg)
!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
![Page 6: Redradix Weekend: Animando sitios web](https://reader033.vdocuments.us/reader033/viewer/2022060204/55a04d2b1a28ab0f0b8b486b/html5/thumbnails/6.jpg)
!6
PRESENTACIÓN DE LA IDEA
STAGING
cabletv.com/the-walking-dead
![Page 7: Redradix Weekend: Animando sitios web](https://reader033.vdocuments.us/reader033/viewer/2022060204/55a04d2b1a28ab0f0b8b486b/html5/thumbnails/7.jpg)
!7
EL TIEMPO QUE DURA LA ANIMACIÓN Y CUÁNDO SE PRODUCEN LAS ACCIONES
TIMING
![Page 8: Redradix Weekend: Animando sitios web](https://reader033.vdocuments.us/reader033/viewer/2022060204/55a04d2b1a28ab0f0b8b486b/html5/thumbnails/8.jpg)
!8
LA DISTANCIA QUE SE RECORRE EN LA ANIMACIÓN
SPACING
![Page 9: Redradix Weekend: Animando sitios web](https://reader033.vdocuments.us/reader033/viewer/2022060204/55a04d2b1a28ab0f0b8b486b/html5/thumbnails/9.jpg)
!9
DEFORMACIÓN DE LOS OBJETOS SQUASH -> COMPRIMIR STRETCH -> ALARGAR
SQUASH AND STRETCH
![Page 10: Redradix Weekend: Animando sitios web](https://reader033.vdocuments.us/reader033/viewer/2022060204/55a04d2b1a28ab0f0b8b486b/html5/thumbnails/10.jpg)
!10
LA ACCIÓN QUE PREPARA AL ESPECTADOR PARA UNA ANIMACIÓN POSTERIOR
ANTICIPATION
![Page 11: Redradix Weekend: Animando sitios web](https://reader033.vdocuments.us/reader033/viewer/2022060204/55a04d2b1a28ab0f0b8b486b/html5/thumbnails/11.jpg)
!11
ACELERACIÓN Y FRENADA - SALIDA (IN) - LLEGADA (OUT) !
GENERA MOVIMIENTOS MÁS REALISTAS
EASING
gsgd.co.uk/sandbox/jquery/easing/
![Page 12: Redradix Weekend: Animando sitios web](https://reader033.vdocuments.us/reader033/viewer/2022060204/55a04d2b1a28ab0f0b8b486b/html5/thumbnails/12.jpg)
!12
TRAYECTORIA CURVAS !
ORGÁNICOS VS. MECÁNICOS
ARCS
![Page 13: Redradix Weekend: Animando sitios web](https://reader033.vdocuments.us/reader033/viewer/2022060204/55a04d2b1a28ab0f0b8b486b/html5/thumbnails/13.jpg)
!13
STRAIGHT AHEAD ANIMACIÓN CONSECUTIVA !
POSE TO POSE INICIO, FINAL, PARTES INTERMEDIAS
STRAIGHT AHEADPOSE TO POSE
![Page 14: Redradix Weekend: Animando sitios web](https://reader033.vdocuments.us/reader033/viewer/2022060204/55a04d2b1a28ab0f0b8b486b/html5/thumbnails/14.jpg)
!14
EFECTO SECUNDARIO QUE ES ARRASTRADO POR LA ACCIÓN PRINCIPAL
FOLLOW THROUGHAND OVERLAP
![Page 15: Redradix Weekend: Animando sitios web](https://reader033.vdocuments.us/reader033/viewer/2022060204/55a04d2b1a28ab0f0b8b486b/html5/thumbnails/15.jpg)
!15
COMPLEMENTA LA ACCIÓN PRINCIPAL !
RELLENAR EL FOTOGRAMA
SECONDARY ACTION
![Page 16: Redradix Weekend: Animando sitios web](https://reader033.vdocuments.us/reader033/viewer/2022060204/55a04d2b1a28ab0f0b8b486b/html5/thumbnails/16.jpg)
!16
TIMING SPACING SQUASH AND STRETCH ANTICIPATION EASING !
ANIMACIÓN
![Page 17: Redradix Weekend: Animando sitios web](https://reader033.vdocuments.us/reader033/viewer/2022060204/55a04d2b1a28ab0f0b8b486b/html5/thumbnails/17.jpg)
!17
!
!
EL MENSAJE DEBE SEGUIR FUNCIONANDO AUNQUE NO HAYA ANIMACIÓN
ANIMACIÓN
![Page 18: Redradix Weekend: Animando sitios web](https://reader033.vdocuments.us/reader033/viewer/2022060204/55a04d2b1a28ab0f0b8b486b/html5/thumbnails/18.jpg)
PARALLAX
![Page 19: Redradix Weekend: Animando sitios web](https://reader033.vdocuments.us/reader033/viewer/2022060204/55a04d2b1a28ab0f0b8b486b/html5/thumbnails/19.jpg)
!19
MOVER ELEMENTOS
A DIFERENTES VELOCIDADES
PARA GENERAR
UN EFECTO ÓPTICO DE PROFUNDIDAD.
![Page 20: Redradix Weekend: Animando sitios web](https://reader033.vdocuments.us/reader033/viewer/2022060204/55a04d2b1a28ab0f0b8b486b/html5/thumbnails/20.jpg)
!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
![Page 21: Redradix Weekend: Animando sitios web](https://reader033.vdocuments.us/reader033/viewer/2022060204/55a04d2b1a28ab0f0b8b486b/html5/thumbnails/21.jpg)
!21
NECESITAMOS OBTENER UNA VELOCIDAD BASE !
EMPLEAMOS EL SCROLL DEL BROWSER
PARALLAX
// var valorScroll = $(‘html,body’).scrollTop(); var valorScroll = $('html').scrollTop() || $('body').scrollTop()
![Page 22: Redradix Weekend: Animando sitios web](https://reader033.vdocuments.us/reader033/viewer/2022060204/55a04d2b1a28ab0f0b8b486b/html5/thumbnails/22.jpg)
!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 });
![Page 23: Redradix Weekend: Animando sitios web](https://reader033.vdocuments.us/reader033/viewer/2022060204/55a04d2b1a28ab0f0b8b486b/html5/thumbnails/23.jpg)
!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 });
![Page 24: Redradix Weekend: Animando sitios web](https://reader033.vdocuments.us/reader033/viewer/2022060204/55a04d2b1a28ab0f0b8b486b/html5/thumbnails/24.jpg)
!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 });
![Page 25: Redradix Weekend: Animando sitios web](https://reader033.vdocuments.us/reader033/viewer/2022060204/55a04d2b1a28ab0f0b8b486b/html5/thumbnails/25.jpg)
!25
!
SI ALGUNO DE LOS ELEMENTOS NO TIENE UNA ALTURA MAYOR QUE LA VENTANA SE PIERDE IMAGEN DE FONDO.
PARALLAXCONSIDERACIONES
![Page 26: Redradix Weekend: Animando sitios web](https://reader033.vdocuments.us/reader033/viewer/2022060204/55a04d2b1a28ab0f0b8b486b/html5/thumbnails/26.jpg)
!26PARALLAX
CSS
JS
background-repeat: repeat-y;
// load, resize Events $('.parallax').each(function (){ if ( $(this).height() < $(window).height() ){ $(this).css({ height:$(window).height() }); } });
CONSIDERACIONES
![Page 27: Redradix Weekend: Animando sitios web](https://reader033.vdocuments.us/reader033/viewer/2022060204/55a04d2b1a28ab0f0b8b486b/html5/thumbnails/27.jpg)
!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 });
![Page 28: Redradix Weekend: Animando sitios web](https://reader033.vdocuments.us/reader033/viewer/2022060204/55a04d2b1a28ab0f0b8b486b/html5/thumbnails/28.jpg)
DEMO
GREYGOOSE
![Page 29: Redradix Weekend: Animando sitios web](https://reader033.vdocuments.us/reader033/viewer/2022060204/55a04d2b1a28ab0f0b8b486b/html5/thumbnails/29.jpg)
PROFUNDIDAD
![Page 30: Redradix Weekend: Animando sitios web](https://reader033.vdocuments.us/reader033/viewer/2022060204/55a04d2b1a28ab0f0b8b486b/html5/thumbnails/30.jpg)
!30
CAMBIAR LA ESCALA DE LOS OBJETOS PARA GENERAR UN EFECTO DE ZOOM !
!
TRAVELING COMPENSADO
PROFUNDIDAD
![Page 31: Redradix Weekend: Animando sitios web](https://reader033.vdocuments.us/reader033/viewer/2022060204/55a04d2b1a28ab0f0b8b486b/html5/thumbnails/31.jpg)
!31PROFUNDIDAD
nytimes.com/projects/2013/tomato-can-blues
![Page 32: Redradix Weekend: Animando sitios web](https://reader033.vdocuments.us/reader033/viewer/2022060204/55a04d2b1a28ab0f0b8b486b/html5/thumbnails/32.jpg)
!32
VOLVEMOS A EMPLEAR EL SCROLL COMO VELOCIDAD BASE
PROFUNDIDAD
var valorScroll = $('html, body').scrollTop()
![Page 33: Redradix Weekend: Animando sitios web](https://reader033.vdocuments.us/reader033/viewer/2022060204/55a04d2b1a28ab0f0b8b486b/html5/thumbnails/33.jpg)
!33PROFUNDIDAD
valorScroll = $('html, body').scrollTop(); valorEscala = 1+(scrollValue/1000); // 1 = 100% $('.item').css({ transform: 'scale('+scaleValue+') });
MODIFICAMOS LA ESCALA DE LOS ELEMENTOS
![Page 34: Redradix Weekend: Animando sitios web](https://reader033.vdocuments.us/reader033/viewer/2022060204/55a04d2b1a28ab0f0b8b486b/html5/thumbnails/34.jpg)
!34
!
LIMITAR LAS ESCALAS DE LOS ELEMENTOS UNA VEZ VISTAS !
EL HECHO DE QUE NO SE VEAN NO SIGNIFICA QUE NO SE PINTEN
PROFUNDIDADCONSIDERACIONES
![Page 35: Redradix Weekend: Animando sitios web](https://reader033.vdocuments.us/reader033/viewer/2022060204/55a04d2b1a28ab0f0b8b486b/html5/thumbnails/35.jpg)
TRANSITION TRANSFORM @ANIMATION
![Page 36: Redradix Weekend: Animando sitios web](https://reader033.vdocuments.us/reader033/viewer/2022060204/55a04d2b1a28ab0f0b8b486b/html5/thumbnails/36.jpg)
!36
TRANSITION Y TRANSFORM!! !
ANIMACIÓN DE ELEMENTOS POR MEDIO DE EVENTOS !
ENRIQUECEN LA EXPERIENCIA COMUNICACIÓN MEJOR
@ANIMATION
![Page 37: Redradix Weekend: Animando sitios web](https://reader033.vdocuments.us/reader033/viewer/2022060204/55a04d2b1a28ab0f0b8b486b/html5/thumbnails/37.jpg)
!37@ANIMATION
apple.com/es/macbook-pro/features-retina/
![Page 38: Redradix Weekend: Animando sitios web](https://reader033.vdocuments.us/reader033/viewer/2022060204/55a04d2b1a28ab0f0b8b486b/html5/thumbnails/38.jpg)
!38@ANIMATION
teamtreehouse.com/
![Page 39: Redradix Weekend: Animando sitios web](https://reader033.vdocuments.us/reader033/viewer/2022060204/55a04d2b1a28ab0f0b8b486b/html5/thumbnails/39.jpg)
!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() }
![Page 40: Redradix Weekend: Animando sitios web](https://reader033.vdocuments.us/reader033/viewer/2022060204/55a04d2b1a28ab0f0b8b486b/html5/thumbnails/40.jpg)
MOBILE
![Page 41: Redradix Weekend: Animando sitios web](https://reader033.vdocuments.us/reader033/viewer/2022060204/55a04d2b1a28ab0f0b8b486b/html5/thumbnails/41.jpg)
!41
!
DISPOSITIVOS TÁCTILES NO EXISTE EL EVENTO SCROLL* !
APAÑO BOTONES
MOBILECONSIDERACIONES
![Page 42: Redradix Weekend: Animando sitios web](https://reader033.vdocuments.us/reader033/viewer/2022060204/55a04d2b1a28ab0f0b8b486b/html5/thumbnails/42.jpg)
!42
!
EVENTOS TÁCTILES SENSORES !
!
MISMA LÓGICA DISTINTO INPUT
MOBILE
![Page 43: Redradix Weekend: Animando sitios web](https://reader033.vdocuments.us/reader033/viewer/2022060204/55a04d2b1a28ab0f0b8b486b/html5/thumbnails/43.jpg)
!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;
}
![Page 44: Redradix Weekend: Animando sitios web](https://reader033.vdocuments.us/reader033/viewer/2022060204/55a04d2b1a28ab0f0b8b486b/html5/thumbnails/44.jpg)
!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
![Page 45: Redradix Weekend: Animando sitios web](https://reader033.vdocuments.us/reader033/viewer/2022060204/55a04d2b1a28ab0f0b8b486b/html5/thumbnails/45.jpg)
!45
DEVICEORIENTATION ORIENTATIONCHANGE
GYROSCOPE
window.addEventListener('deviceorientation', compass); !function compass(e){ rotationX = e.beta; rotationY = e.gamma; rotationZ = e.alpha;
}
![Page 46: Redradix Weekend: Animando sitios web](https://reader033.vdocuments.us/reader033/viewer/2022060204/55a04d2b1a28ab0f0b8b486b/html5/thumbnails/46.jpg)
!46
DEVICEORIENTATION ORIENTATIONCHANGE
GYROSCOPE
window.addEventListener('deviceorientation', compass); !function compass(e){ rotationX = e.beta; rotationY = e.gamma; rotationZ = e.alpha;
}
is.gd/szVkG2
![Page 47: Redradix Weekend: Animando sitios web](https://reader033.vdocuments.us/reader033/viewer/2022060204/55a04d2b1a28ab0f0b8b486b/html5/thumbnails/47.jpg)
UN PASO MÁS...
![Page 48: Redradix Weekend: Animando sitios web](https://reader033.vdocuments.us/reader033/viewer/2022060204/55a04d2b1a28ab0f0b8b486b/html5/thumbnails/48.jpg)
IE SCHOOL