Tengo que enviar una réplica de un sitio web a mi maestro para obtener el certificado de desarrollo web frontend y quería crear el sitio web de Riot Games, sin embargo, no pude encontrar el mismo efecto desplegable que tiene el sitio web. ¿Cómo logro el mismo efecto?
He vinculado el sitio web a continuación: https://www.riotgames.com/en
¡Gracias!
Puede usar las propiedades CSS de clip-path y opacity y animarlo.
En la siguiente demostración, he usado 2 fotogramas clave diferentes para lograr el efecto. dropDownAnimation : al principio aparecería como un pentágono y luego gradualmente se convertiría en un rectángulo al final
fadeIn : Gradualmente hace que el menú desplegable sea visible.
Puede agregar más puntos intermedios para tener más control sobre la animación. Por ahora solo he añadido 0%, 50% y 100%. Además, es posible que deba jugar con la propiedad animation-duration.
const btnToggleDropdown = document.querySelector("#toggle-dropdown"); const content = document.querySelector("#content"); btnToggleDropdown.addEventListener("click", () => { content.classList.toggle("dropdown"); }); .content { opacity: 0; padding: 1rem; } .dropdown { animation: dropDownAnimation 200ms forwards, fadeIn 1s forwards; opacity: 1; background-color: red; } @keyframes dropDownAnimation { 0% { clip-path: polygon(0 0, 100% 0%, 100% 10%, 25% 10%, 0 10%); } 50% { clip-path: polygon(0 0, 100% 0%, 100% 40%, 25% 70%, 0 40%); } 100% { clip-path: polygon(0 0, 100% 0%, 100% 100%, 25% 100%, 0 100%); } } @keyframes fadeIn { 0% { opacity: 0 } 100% { opacity: 1 } } <button id="toggle-dropdown">Toggle Efffect</button> <div id="content" class="content"> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Lorem ipsum, dolor sit amet consectetur adipisicing elit. </div>