Clip-path

특정 영역만 보여지도록 마스크 처리한다.

html

<body>
  <section>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
  </section>
</body>

css

section {
  width: 100%;
  height: 100vh;
  background: black;
  position: relative;

  div{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;

    &.box1 {
      background: hotpink;
      clip-path: circle(1% at 80% 85%);
    }
  
    &.box2 {
      background: aqua;
      clip-path: circle(1% at 85% 85%);
    }
  
    &.box3 {
      background: orange;
      clip-path: circle(1% at 90% 85%);
    }
  }
}

롤오버시, 화면을 덮도록 한다.

html

<body>
  <section>
    <h1>nam sangdo do</h1>
    <div class="box1">
      <h2>About Me</h2>
    </div>
    <div class="box2">
      <h2>Portfolio</h2>
    </div>
    <div class="box3">
       <h2>Contact</h2>
    </div>
  </section>
</body>

css

section {
  width: 100%;
  height: 100vh;
  background: black;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-size: 6vh;

  div{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    transition: 1s;
    padding: 10vh 10vw;

h2{
  font: bold 10vw/1 "arial;"
}

    &.box1 {
      background: hotpink;
      clip-path: circle(20px at 70% 80%);
    }
  
    &.box2 {
      background: aqua;
      clip-path: circle(20px at 80% 80%);
    }
  
    &.box3 {
      background: orange;
      clip-path: circle(20px at 90% 80%);
    }

    &.on {
      clip-path: circle(100% at center);
    }
  }
}

main

const divs = document.querySelectorAll('div');

divs.forEach((data, index)=>{
  // 각 div를 클릭하면
  data.addEventListener('click', ()=>{
    // 해당 요소에 on이 있으면 빼주고
    // 없으면 붙여주는 토글 기능 구현
    data.classList.toggle("on");
  });
});

Clip-path

댓글 쓰기