Footer

Este es mi diseño
GitHub

Retroalimentación 😃

Les dejare aquí un pequeño resumen de las propiedades de animation que hemos venido trabajando y para que sirven:

• Aqui pondremos el nombre de nuestra animación y poder referenciarla en los keyframes

animation-name: "name";  

• Aqui pondremos el tiempo que queremos que tarde nuestra animación.

animation-duration: "0.5s";  

• Este será el tiempo que se tendrá para retardar la animación.

animation-delay: 2.5s; 

• Este será el tipo de aceleración que aplicaremos a nuestra animación.

animation-timing-function: easy-in-out;  

• Este nos indicara que queremos que vuelva al estado inicial con “forwards”

animation-fill-mode: forwards; 

Footer

Les comparto mi resultado:

Código de la clase: https://github.com/paolojoaquin/lego-superheroes/tree/Clase/8-footer

HTML semantico y accesible
.

.
El ul como container le indicaria a un lector de pantalla que en esa seccion se listan 3 elementos y los button que esos elementos son interactivos, en este caso abriran un modal. Tambien le ayuda al JS, por ejm en un eventListener, button interpreta la tecla enter como click tambien. Esto ayuda a que personas que en x momento no dispongan de un mouse, tambien puedan interactuar con los elementos.

No sé si algo cambió desde que se hizo el curso hasta ahora (7 meses) o si hice algo diferente en el código pero a mi el hover no me funcionaba cuando pasaba el mouse encima del div.

Utilizando las devtools y forzando al div a estar en el estado hover pude ver la animación por lo que me puse a investigar que estaba pasando, y cuando le daba inspeccionar al div, las devtools siempre me seleccionaban era el loader .

Así que pensé que en la posibilidad de que el hover no se estuviera aplicando por culpa del loader ya que este, al tener un z-index de 3, podría estar “tapando” al div.

Así que decidí ponerle al loader un z-index de 0 por defecto y en el inicio de la animación cambiar este valor a 3 para que estuviera encima de todos los demás elementos y aal final de la animación volver a ponerlo en 0.

Aquí está mi código, espero les sirva:

@keyframes loader {
    0%{
        z-index: 3;
        opacity: 1;
        visibility: visible;
    }
    95% {
        opacity: 1;
        visibility: visible;
    }
    100%{
        z-index: 0;
        opacity: 0;
        visibility: visible;
    }
}

Para que se repita la misma transición al quitar el mouse solo le colocan “transition: 0.3s ease;” en el contenedor padre y listo.

Este es el desafió del proyecto

HTML semantico y accesible:
.
El ul como container le indicaria a un lector de pantalla que en esa seccion se listan 3 elementos y los button que esos elementos son interactivos, en este caso abriran un modal. Tambien le ayuda al JS, por ejm en un eventListener, button interpreta la tecla enter como click tambien. Esto ayuda a que personas que en x momento no dispongan de un mouse, tambien puedan interactuar con los elementos.

<section class="hero-slider">
	<ul class="hero-slider__container">
		<li>
			<div></div>
			<button>
				<img
					src="https://i.ibb.co/tKWqw8J/spiderman.png"
					alt="spiderman"
				/>
			</button>
		</li>
		<li>
			<div></div>
			<button>
				<img src="https://i.ibb.co/Xzsdvgg/robin.png" alt="robin" />
			</button>
		</li>
		<li>
			<div></div>
			<button>
				<img src="https://i.ibb.co/M18p91c/batman.webp" alt="batman" />
			</button>
		</li>
	</ul>
</section>

Que buena manera para que Heroe Lego de footer se mueve con hover! 😃

Que chevere proyecto 😃

Así va quedando el mío ❤️

![](