스크롤 시 텍스트에 그라디언트 배경색 채우기 효과 구현

 

안녕하세요 찐망고입니다.

 

이전에 그라디언트를 이용하여 마우스 hover할때

밑줄 애니메이션 효과를 적용하는 포스팅을 한적이 있는데요.

마우스 호버 CSS 밑줄 효과, CSS hover 밑줄 애니메이션

 

오늘은 텍스트에 배경색이 아래서 위로 채워지는 효과를 포스팅 할 예정입니다.

 

예시 사이트를 보면 스크롤 이동시 텍스트에 배경색이 채워집니다.

 

텍스트 배경색이 채워지는 원본이미지

 

 

 

 

CSS코드

h2 {
  color: transparent;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: #565656;
}
.fill {
    -webkit-text-stroke-color: #565656;
    -webkit-text-stroke-width: 1px;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: 100% 0%;
    background-image: linear-gradient(0deg, #191919 0%, #191919 50%)
    transition: all .5s linear;
}
.animation {
    background-size: 100% 100%;
    -webkit-text-stroke-color: #191919;
}

 

그라디언트를 아래쪽에 위치시키고 background-size를 이용해 초기 상태에서 보이지 않게 합니다.

.animation 클래스가 추가되면 배경 크기를 늘려 그라디언트가 보이게 합니다.

 

 

-webkit-text-stroke 속성은 CSS3의 텍스트 관련 속성 중 하나로,

웹킷 기반 브라우저(주로 Chrome, Safari 등)에서 처음 지원되기 시작했는데요.

이는 주로 텍스트에 스타일링 효과를 추가하고자 할 때 사용됩니다.

h2 {
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: #565656;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
}

 

• -webkit-text-stroke-width: 1px: 텍스트 윤곽선의 두께를 1픽셀로 설정
• -webkit-text-stroke-color: #565656: 윤곽선의 색상을 회색(#565656)으로 설정
• -webkit-text-fill-color: transparent: 텍스트 채우기 색상을 투명하게 설정
• -webkit-background-clip: text: 배경이 텍스트 모양에 맞춰 잘리도록 설정

 

 

 

 

See the Pen Untitled by 찐망고 (@nnwbliyz-the-styleful) on CodePen.

 

 

 

 

참고사이트

JellyBus