오식랜드
[javascript motion] 밑줄 그어지는 모션 본문
텍스트를 강조하기 위해 밑줄이 그어지는 듯한 모션이 필요할 때가 있다.
그 때 유용한 clip!
script에서 cilp을 늘려 밑줄 긋는 모션을 만들어보자
clip을 사용할 때 주의할 점이 있다.
1. clip의 대상은 position이 absolute여야 한다.
2. 요소가 overflow : visible일 때는 적용되지 않는다.
2. :before, :after와 같은 가상 요소는 script에서 직접 선택이 안돼서, 가상요소의 상위 선택자에 클래스를 추가하는 방식으로 해줘야 한다.
clip의 문법을 알아보자.
밑줄 모션에서는 사각형 좌표를 사용한다.
clip : rect( <top>, <right>, <bottom>, <left> )
right 좌표를 0 에서 nnnpx만큼 이동시켜주며 밑줄이 그어지는 것 처럼 보이게 할 것이다.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
body{
background-color: rgb(77, 175, 255);
}
h2{
text-align: center;
font-size: 30px;
color: #fefefe;
}
span{
position: relative;
}
span:before{
position: absolute;
content: '';
width: 100%;
height: 16px;
bottom: 0px;
z-index: -1;
background-color: rgb(255, 189, 9);
clip: rect(0px, 0px, 50px, 0px);
transform: skew(30deg);
transition: all 0.6s;
}
span.line::before{
clip: rect(0px, 150px, 50px, 0px);
}
</style>
</head>
<body>
<h2>밑줄 <span>그어지는</span> 모션!</h2>
<script>
document.querySelector('span').classList.add('line')
</script>
</body>
</html>여기서 가상요소를 사용하지 않고 비어있는 div를 쓴다던가, 밑줄 이미지를 사용한다던가 하는 방법은 다양하다!
가상요소가 아니라면 script에서 직접 style을 지정해줘도 상관없다!
ex) js : element.style.clip = 'rect(0px, 150px, 50px, 0px)'
또한 position relative인 요소는 clip 대신에 clip-path를 사용하면 된다! clip보다 조금 복잡하지만 아래 MDN링크를 참고해 사용해보쟈
clip path 참고 링크 : developer.mozilla.org/ko/docs/Web/CSS/clip-path
clip-path - CSS: Cascading Style Sheets | MDN
clip-path clip-path CSS 속성은 요소의 클리핑 범위를 지정합니다. 클리핑 범위 안의 부분은 보여지고, 바깥은 숨겨집니다. clip-path: none; clip-path: url(resources.svg#c1); clip-path: margin-box; clip-path: border-box; cli
developer.mozilla.org
매번 계산하기 귀찮아서 방향별로 정리해놓았다. 요소에 맞는 사이즈로 수정해서 사용하면 된당
상 -> 하
from : clip: rect(0px, 200px, 0px, 0px);
to : clip: rect(0px, 200px, 300px, 0px);
하 -> 상
from : clip: rect(100px, 200px, 100px, 0px);
to : clip: rect(0px, 200px, 300px, 0px);
우 -> 좌
from : clip: rect(0px, 200px, 200px, 200px);
to : clip: rect(0px, 200px, 200px, 0px);
좌 -> 우
from : clip: rect(0px, 0px, 200px, 0px);
to : clip: rect(0px, 200px, 200px, 0px);'dev-log > html·css·js' 카테고리의 다른 글
| [javascript] 요소의 좌표값 구하기 (0) | 2021.05.06 |
|---|---|
| [javascript] 화면 스크롤 값 구하기 (0) | 2021.05.06 |
| [nuxt / motion] clip을 이용한 슬라이드 (0) | 2021.05.04 |
| [javascript motion] 숫자 카운팅 모션 (0) | 2021.05.04 |
| [javascript motion] 스크롤 반응 모션 (0) | 2021.04.30 |
