How to achieve the exact effect of the dropdown menu of riot games' website-CodePudding

I have to submit a replica of a website to my teacher to get the certificate of frontend web development and I wanted to create riot games' website, however I couldn't find the same dropdown effect the website has. How do I achieve the same effect?

I have linked the website below: https://www.riotgames.com/en

Thanks!

CodePudding user response：

You can use the clip-path and opacity CSS properties and animate it.
In the following demo, I have used 2 different keyframes to to achieve the effect. dropDownAnimation : At start would show up as a pentagon and then gradually becomes a rectangle by the end
fadeIn: Gradually makes the dropdown visible.

You can add more points in between for more control over the animation. For now I've just added 0%, 50% and 100%. Also, you might need to play with the animation-duration property.

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" >
    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>