오늘은! 그라디언트 효과를 활용해서 텍스트 효과를 소개하려고 한다!

📌사전지식

먼저 background 그라디언트의 퍼센티지를 조절하면 그라이데션 효과가 아닌 뚝 끈긴 단색 2개로 만들 수 있다.(테스트 해보시길...)

📌레퍼런스

위와같은 사이트에 텍스트 효과는 흔히 보았는데 여기에서는 트릭이 한가지 있다.

바로 단색배경일경우 사용할 수 있고, 면을 이용해서 마스킹 효과를 냈던것!

그렇기때문에 뒤에 배경이미지나 재질이 들어간 이미지 같은경우 사용할 수없는 상태이다.

그라이디언트를 사용하면 가능하지 않을까 의문이 들었고, 검색에 돌입했다.

텍스트에 그라디언트효과를 줄수 있다. background-clip의 text와 text-fill-color의 transparent(투명)를 이용 한다면!

📌CSS

핵심 css다! 그라디언트를 이용하고 background-clip을 이용해 텍스트를 마스킹 하고, fill-color로 텍스트의 색을 없앤다.

h1{
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 1) 0%,
    rgba(0, 0, 0, 1) 0%
    );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

📌메커니즘

마크업을하고 개발자도구를 켜서 확인해보면 그라디언트 퍼센티지를 조절해보면 왔다 갔다 한다...!

그렇다면 스크롤을 트리거로 활용해서 퍼센트를 조절한다면 레퍼런스 사이트와 동일한 효과를 얻을 수 있게 된다!

시작하자!!!!!가즈아~

📌JS

여기서 gsap를 쓸수 있지만, 같은 역할을 하는 js는 그렇게 어렵지 않으니 따라오세요!

//현재스크롤높이(위치)
const winY = window.scrollY;
//컨텐츠(텍스트)의 위치
const targetTop = document.querySelector('article').offsetTop;
//컨텐츠의 높이
const targetHeight = document.querySelector('article').offsetHeight;
//공식
const currentRatio = (winY - targetTop)/targetHeight;

하나의 공식이 있다.

현재 스크롤 위치가 컨텐츠 기준 어느위치에 있느냐를 구해야한다.

이를 구하면 비율을 환산해 컨텐츠 시작지점(0)과 컨텐츠 끝나는 지점(1)을 구할수 있다. 0~1로 그럼 이 숫자를 이용해서 css 값에 js로 반환하면 어떤 css든(수치로 입력하는 것 한정) 할수 있다.

공식을 해석해보자

//winY = 현재 스크롤 위치
//target = 타겟 위치
//targetHeight = 타겟의 높이값(끝나는지점)

//현재스크롤 위치 - 타겟위치(top) / 타겟의 높이(끝나는지점)
const currentRatio = (winY - targetTop)/targetHeight;

• 스크롤 위치와 타겟위치를 빼는 이유는 컨텐츠가 어느 높이에 있든 시작지점을 똑같이 0으로 시작하기 위함이다.
• 타겟위치를 빼서 스크롤의 위치는 타겟 기준부터 0으로 시작해 증가한다.
• 컨텐츠의 높이값을 나눔으로서 0~1 비율을 구할수 있다. 생각해보면 스크롤 위치가 타겟 높이만큼 이동하면 높이값이랑 동일하므로 1이 된다는 것을 알 수 있다.(먼저 targetTop을 빼줬기때문에 가능)

targetTxt.style.background = `linear-gradient(90deg, rgba(255, 255, 255, 1) ${currentPosition*180}%, rgba(0, 0, 0, 1) 0%)`;

이를이용해 퍼센트를 조절하는데 문제가 한가지 있었다 background를 js로 사용하니 background-clip의 속성이 지워진다.

📌문제해결..!

그래서 찾아보니 linear-gradient는 background-image의 값으로 사용이 가능하다는 것을 봤다! 그리하여 js에도 똑같이 background-image를 썼다.

targetTxt.style.backgroundImage = `linear-gradient(90deg, rgba(255, 255, 255, 1) ${currentPosition*180}%, rgba(0, 0, 0, 1) 0%)`;

사실 css에 import를 이용해서 무시해버리는 방법도 있지만 웬만하면 css에서 import는 안쓰는 것이 좋다.(import를 쓰면 css 선택자 계층이 많이 무너지는 경험을 했다.)

📌결과!(CODEPEN)

currentRatio값을 곱하거나 더하거나 해서 빠르게 혹은 나중에 변화하게 시점변경도 가능하니 다양하게 활용 해보길 바란다...!