(21.4.9)

*hover event

#id{
      width: 200px;
      height: 100px;
      border: 1px solid #000000;
      text-align: center;
      line-height: 100px;
      position: relative;
      overflow: hidden;
      display: inline-block;
      transition: all 0.5s;
  }
  #id:before{
      content: "";
      top: 0;
      left: 0;
      width: 0px;
      height: 100px;
      position: absolute;
      z-index: -1;
       transition: all 1s;
  }
  #id:hover:before{
     background: #225ea7; 
     border-bottom-right-radius: 50%;
     border-top-right-radius: 50%;
     width: 200%;
  }

hover로 background 를 주는데 천천히 채워지는 이벤트를 하기 위해 찾았다.

여기서 핵심은 backgroun 를 다른 영역으로 만들어서 처음에 영역이 없다가 hover가 발동할때 늘어나는 것이다.

효과를 주고 싶은 영역을 position:relative로 주고 그 영역에  :before  content 로 요소를 만들어 놓고 position:absolute 주고 z-index 로 뒤로 가게 만든다음 높이만 주고 넓이는 0으로 준 상태에서 hover 발동시 넓이를 주면 점점 채워지는 효과를 줄수있다. border-radius 로 모양도 줄수있다.

 

*스크롤 이벤트

window.addEventListener('scroll',quick);

function quick(e){
    let b = document.querySelector('#quick');
    console.log(b.style.top,window.scrollY);
    b.style.top = 1100+window.scrollY+"px";
}