Muestra las diferencias entre dos versiones de la página.
Ambos lados, revisión anterior Revisión previa Próxima revisión | Revisión previa | ||
clase:daw:diw:2eval:tema08 [2021/01/06 21:20] admin [Animaciones] |
clase:daw:diw:2eval:tema08 [2022/02/13 19:57] admin |
||
---|---|---|---|
Línea 22: | Línea 22: | ||
Mas información: | Mas información: | ||
- | * [[https:// | + | |
- | * [[https:// | + | * [[https:// |
- | * [[https:// | + | * [[https:// |
+ | * [[https:// | ||
+ | * CSS | ||
+ | | ||
+ | * [[https:// | ||
+ | * [[https:// | ||
Línea 230: | Línea 236: | ||
* propiedadCSS: | * propiedadCSS: | ||
* duracion: Duración en segundos de la transición | * duracion: Duración en segundos de la transición | ||
- | * timing-function: | + | * timing-function: |
- | * '' | + | * '' |
* '' | * '' | ||
- | * '' | + | * '' |
* '' | * '' | ||
* '' | * '' | ||
- | | + | * '' |
- | * '' | + | * '' |
- | | + | |
- | * '' | + | |
* retardo: Cuanto tiempo en segundos tarda en empezar la transición. | * retardo: Cuanto tiempo en segundos tarda en empezar la transición. | ||
- | Mas información de la timing-function en: [[https:// | + | Mas información de la timing-function en: |
+ | * [[https:// | ||
+ | * [[https:// | ||
+ | * [[http:// | ||
+ | * [[https:// | ||
+ | * [[https:// | ||
+ | * [[https:// | ||
Por ejemplo: | Por ejemplo: | ||
Línea 257: | Línea 267: | ||
transition-delay: | transition-delay: | ||
</ | </ | ||
- | |||
- | |||
Línea 265: | Línea 273: | ||
===== Animaciones ===== | ===== Animaciones ===== | ||
Las animaciones son similares a las transiciones pero mas potentes además que suelen usarse desde JavaScript. | Las animaciones son similares a las transiciones pero mas potentes además que suelen usarse desde JavaScript. | ||
+ | |||
+ | Mas información: | ||
+ | * [[http:// | ||
+ | * [[https:// | ||
+ | * [[https:// | ||
+ | * [[https:// | ||
+ | * [[https:// | ||
+ | * | ||
+ | |||
Las animaciones constan de dos apartados distintos. | Las animaciones constan de dos apartados distintos. | ||
Línea 285: | Línea 302: | ||
| | ||
.c-cuadrado--girar { | .c-cuadrado--girar { | ||
- | animation-name: | + | animation-name: |
animation-duration: | animation-duration: | ||
} | } | ||
| | ||
| | ||
- | @keyframes | + | @keyframes |
0% { | 0% { | ||
transform: rotate(0deg); | transform: rotate(0deg); | ||
Línea 297: | Línea 314: | ||
| | ||
50% { | 50% { | ||
- | transform: rotate(365deg); | + | transform: rotate(360deg); |
background-color: | background-color: | ||
} | } | ||
Línea 323: | Línea 340: | ||
* '' | * '' | ||
* '' | * '' | ||
- | * '' | + | * '' |
* '' | * '' | ||
- | * '' | + | * '' |
* '' | * '' | ||
* '' | * '' | ||
- | | + | * '' |
- | * '' | + | |
- | | + | |
* '' | * '' | ||
* '' | * '' | ||
Línea 340: | Línea 355: | ||
* '' | * '' | ||
* '' | * '' | ||
- | * '' | + | * '' |
- | * '' | + | * '' |
- | * '' | + | * '' |
- | * '' | + | * '' |
- | * '' | + | * '' |
* '' | * '' | ||
* '' | * '' | ||
* '' | * '' | ||
+ | |||
+ | Mas información de la timing-function en: | ||
+ | * [[https:// | ||
+ | * [[https:// | ||
+ | * [[http:// | ||
+ | * [[https:// | ||
+ | * [[https:// | ||
+ | * [[https:// | ||
+ | |||
==== JavaScript ==== | ==== JavaScript ==== | ||
+ | Para volver a ejecutar la animación desde JavaScript se hace de la siguiente forma: | ||
<sxh javascript> | <sxh javascript> | ||
Línea 365: | Línea 390: | ||
</ | </ | ||
- | * [[https:// | + | Es decir que hay que quitar la clase CSS que tiene la animación y volver a ponerla. El problema es que si la quitas y la vuelves a poner , el navegador no se entera. Así que hay que hacer el truco de quitarla , esperar 10 ms con un timeout y añadir la clase. |
+ | Mas información: | ||
+ | * [[https:// | ||
+ | ===== Animaciones simétricas ===== | ||
+ | La animación que hemos visto , vuelve al mismo sitio. Si queremos una animación que haga eso , no es necesario definir //la ida y la vuelta//. Es tan sencillo como solo definir la ida y decir que vuelva. | ||
- | Mas información: | + | Eso se consigue de la siguiente forma: |
- | * [[http:// | + | |
- | | + | < |
- | * [[https://daneden.github.io/ | + | .c-cuadrado--girar { |
- | * [[https:// | + | |
+ | animation-duration: | ||
+ | animation-iteration-count: 2; | ||
+ | | ||
+ | } | ||
+ | |||
+ | |||
+ | @keyframes animacion-girar { | ||
+ | 0% { | ||
+ | transform: rotate(0deg); | ||
+ | background-color: #bbd4f7; | ||
+ | } | ||
+ | |||
+ | 100% { | ||
+ | transform: rotate(360deg); | ||
+ | background-color: | ||
+ | } | ||
+ | |||
+ | } | ||
+ | </sxh> | ||
+ | |||
+ | Los cambios que hemos hecho son los siguientes: | ||
+ | * Hacemos que la animación dure la mitad: '' | ||
+ | * Pero hacemos que la haga 2 veces: '' | ||
+ | * Por último hacemos que la segunda vez la haga al revés: '' | ||
+ | |||
+ | Y con éste truco siempre tenemos una animación de ida y vuelta. | ||
===== Ejercicios ===== | ===== Ejercicios ===== | ||
==== Ejercicio 1 ==== | ==== Ejercicio 1 ==== | ||
- | Crea un programa en JavaScript+HTML+CSS | + | Crea una página web que: |
+ | * Muestre | ||
+ | * Que al poner el cursor encima | ||
+ | * Que al quitar el curso vuelva a su posición | ||
+ | * Que dure 2 segundos. | ||
==== Ejercicio 2 ==== | ==== Ejercicio 2 ==== | ||
+ | Crea una página web que: | ||
+ | * Muestre un cuadrado rojo de 200px de lado. | ||
+ | * Que al poner el cursor encima | ||
+ | * Que al quitar el curso vuelva a su tamaño original. | ||
+ | * Que dure 3 segundos. | ||
Crea un programa en JavaScript+HTML+CSS que el tamaño de un texto pase de los 12px iniciales a los 30px finales y que tarde 3 segundos. | Crea un programa en JavaScript+HTML+CSS que el tamaño de un texto pase de los 12px iniciales a los 30px finales y que tarde 3 segundos. | ||
==== Ejercicio 3 ==== | ==== Ejercicio 3 ==== | ||
- | Modifica | + | Crea una página web: |
+ | * Que el fondo sea gris claro. | ||
+ | * Muestre un '' | ||
+ | * Que al poner el curso sobre él para escribir, | ||
+ | * Que al quitar el curso el '' | ||
+ | * Que dure 1 segundo. | ||
==== Ejercicio 4 ==== | ==== Ejercicio 4 ==== | ||
- | Modifica | + | Crea una página web: |
+ | * En el fondo se verá una foto con la torre de pisa. | ||
+ | * Que sobre el borde superior de la torre coloques la imagen de una pelota. | ||
+ | * Que al pulsar un botón se active una animación que deje caer la pelta hasta el suelo y al acabar se quede ahí. | ||
+ | * Si se vuelve a pulsar el botón, repetirá la animación. | ||
+ | * La duración de la animación será de 9,4s (Es lo que tardaría en caer una pelota desde la torre de pisa suponiendo que no hay rozamiento) | ||
+ | |||
+ | Debes probar con distintas '' | ||
+ | |||
+ | ==== Ejercicio 5 ==== | ||
+ | Repite | ||
+ | |||
+ | Otra diferencia es que la pelota al llegar abajo rebotará y volverá hasta arriba del todo y así indefinidamente. | ||
+ | |||
+ | ==== Ejercicio 6 ==== | ||
+ | Crea una página web: | ||
+ | * En el fondo se verá una foto del espacio y de la Estación Espacial Internacional (IIS). | ||
+ | * Que sobre algún lado de la IIS coloques la imagen de un astronauta. | ||
+ | * Que al pulsar un botón se active una animación que nueva el astronauta durante 1000px y al acabar se quede ahí. | ||
+ | * Si se vuelve a pulsar el botón, repetirá la animación. | ||
+ | * La duración de la animación será de 5s | ||
+ | |||
+ | Debes probar con distintas '' | ||
+ | |||
+ | ==== Ejercicio 7 ==== | ||
+ | Crea una página web: | ||
+ | * En el fondo se verá una foto de una carretera recta vista desde arriba. | ||
+ | * Que sobre el inicio de la carretera coloques la imagen de un coche visto desde arriba. | ||
+ | * Que al pulsar un botón se active una animación que nueva el coche hasta llegar al final de la carretera y al acabar se quede ahí. | ||
+ | * Si se vuelve | ||
+ | * La duración de la animación será la necesaria para que de sensación de realidad. | ||
+ | |||
+ | Debes probar con distintas '' | ||
+ | |||
+ | ==== Ejercicio 8 ==== | ||
+ | Repite el ejercicio anterior pero ahora el coche irá frenando cuando llegue al final de la carretera. | ||
+ | |||
+ | |||
+ | ==== Ejercicio 9 ==== | ||
+ | Crea una página web: | ||
+ | * Que muestre un botón que tenga con el texto " | ||
+ | * Que cuando pasen 20 seg desde la carga de la página, se lance una animación que haga que el icono se haga un poco mas grande y tenga " | ||
+ | * La animación no se debe ejecutar si el usuario antes ha pulsado el botón. | ||
+ | * Al acabar la animación el icono se quedará como estaba | ||
+ | * La animación debe durar 2s. | ||
+ | |||