news homepage using html, css and js

Community feedback

• 

  Nelson•2,390

  @nelsonleonePosted almost 2 years ago

  Hello, congrats on completing this challenge.🎊🎊

  Yeah , i noticed what you talked about , here are some tips , And i hope they were helpful. Yes, the animation is not being add because you are adding and removing the content, so tha animation has no time to play.

  You can use keyframes, nav{ animation-duration: duration, }

  @keyframe setOpacity{ from: {opacity:1} to:{opacity:0} } to add the opacity from - to where to want ,

  then when the burger i clicked, before removing the nav, play the animation first.

  Now the animation will have time to play before the content is removed. burger.addeventlistner('click',() => { nav.style.animationName = "setOpacity",

  setTimeout(() => { nav.classList.remove('show') ,400} })

  Secondly, You can add a filter to the other contents in the page apart from the nav when it's how, like blur or opacity , which makes the nav stand-out,

  Or You can simply add a box-shadow to the nav container box-shadow:0 0 4px 4px color

  0