A煤n no tienes acceso a esta clase

Crea una cuenta y contin煤a viendo este curso

Footer

8/12
Recursos

Aportes 12

Preguntas 0

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesi贸n.

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 鈥渇orwards鈥
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 鈥渢apando鈥 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 鈥渢ransition: 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 鉂わ笍

![](