Redradix Weekend: Animando sitios web
5 recomendaciones1,077 vistas
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.
![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;
}](https://image.slidesharecdn.com/animandositiosweb-weekend-140224101517-phpapp01/85/Redradix-Weekend-Animando-sitios-web-43-320.jpg)
![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;
}](https://image.slidesharecdn.com/animandositiosweb-weekend-140224101517-phpapp01/85/Redradix-Weekend-Animando-sitios-web-44-320.jpg)
Redradix Weekend: 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
- 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
- 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
- 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
- 36. @ANIMATION TRANSITION Y TRANSFORM!! ! ANIMACIÓN DE ELEMENTOS POR MEDIO DE EVENTOS ! ENRIQUECEN LA EXPERIENCIA COMUNICACIÓN MEJOR !36
- 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