LAKODEZ
¡Buenas! Soy Nefer Labrada, un alumno de la asignatura de TICS 2018/2019 y esta página es mi proyecto.
Si estás aquí es porque deseas saber los pequeños trucos que se pueden
usar para que nuestras páginas no sean tan feas. ¡Vamos a animar un
poco y entender qué es CSS y Javascrpit!
A lo largo de esta página, veremos distintas maneras en las cuales puedes
crear una página interactiva y animada. Concretamente, aprenderemos sobre
el uso de Animaciones CSS y Animaciones JS.
Se recomienda que antes de acceder a la información de esta página, que se
haya acabado el curso online ( p.e Khan Academy ) sobre HTML, CSS y JAVAscript
para poder entender las explicaciones y sacar conclusiones de los ejemplos.
Esto no es un tutorial creado por un experto en la materia ni por alguien
licenciado, sino por alguien que entiende un mínimo de diseño y de código.
Acabado el aviso, veremos un ejemplo de las animaciones de css. ¡Desliza para
abajo para acceder a la siguiente sección!
Como has podido comprobar en esta página, CSS PUEDE animar. No es un trabajo
exclusivo para JAVAscript. Pero... ¿Cómo animamos con CSS? Seguro es algo muy complicado.
Nada más alejado de la realidad. CSS se ha caracterizado siempre por su simplicidad.
En este apartado, te enseñaré a utilizar los @keyframes.
Los @keyframes se encargan de trasladar un objeto de un style a otro. Por lo tanto,
tenemos que especificar de qué a qué estado queremos ir. Esto se puede hacer
con palabras o con %. Un ejemplo sería:
@keyframes example
from {
color: red;
}
to {
color: yellow;
}
}
Entender esto es fundamental para comprender las animaciones.
Ahora bien, a estas animaciones les podemos aplicar un delay, un nombre,
una duración... Esto se hace con el comando animation. ¡Pongamos un ejemplo
de un cuadrado que cambia de color infinitamente!
div {
width: 100px;
height: 100px;
background-color: red;
position: relative;
-webkit-animation-name: example;
-webkit-animation-duration: 4s;
-webkit-animation-iteration-count: infinite;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: infinite;
}
@keyframes example
0% {background-color:red;}
25% {background-color:yellow;}
50% {background-color:blue;}
75% {background-color:green;}
100% {background-color:red;}
}
Si has seguido los pasos a la perfección, el resultado será algo así:
¿Lo conseguiste? ¡Enhorabuena! Has aprendido a cómo animar con CSS. No fue
difícil, ¿verdad?.
Con CSS se pueden hacer animaciones muy chulas para nuestras páginas web. Lamentablemente,
CSS no cuenta con la suficiente capacidad de animación como lo tiene JS.
¡Pero no te desanimes! Ahora aprenderás a sacarle partido a tus animaciones con JS.
JAVAscript tiene fama por su dificultad. Mucho se habla de que "es un lenguaje muy
complicado" o incluso de que "los hay mejores." Yo no vengo a venderte la moto:
JAVAscript es un lenguaje complicado y se requieren horas de aprendizaje para entenderlo.
Pero... ¿quién dijo que teníamos que hacer nosotros el trabajo sucio?
Ninguna de las animaciones de esta página fueron creadas por mí. Son sacadas de la comunidad
de creadores en Github.
Podemos, a partir de ellas, entender lo que sucede en nuestras páginas. Si no, podemos dejar
que la magia fluya y ver como nuestras páginas se convierten en obras de arte sin saber por qué.
En este apartado, te explicaré cómo incrustar JAVAscript en nuestras páginas web.
Para comenzar un script de JS, debemos poner tanto de dónde procede como también cuándo comenzará. Esto se hace en distintos lugares dentro de nuestro código.
<link href="aquítulink.com"> </link>
<link href="/aquitudirectorio.js"> </link>
<script src="script.js"> </script>
<script href="linkdelscript.com"> </script>
¡Vaya! De verdad te interesa mucho cómo crear páginas interactivas y animadas, ¿verdad?.
Este último apartado no será un tutorial, será el conjunto de plugins que he usado para crear mi proyecto.
...
...
...
Entonces... ¿dónde están?
Aquí es donde TÚ entras en juego. Los plugins y scripts de esta página están a tu disposición. ¡Solo tienes que
buscarlos! ¿Dónde? Ese no es mi problema. ¡Ánimo!
¡Sé aventurero! Adéntrate en los confines más recónditos de esta página y consigue averiguar cómo la hice!