마스크효과 활용

WebKit (웹킷) 기반의 브라우저에서 사용 가능한 기능 

 ( ex .크롬 , 엣지 , 네이버 웨일)

익스가 사라지면서  많이 사용

 

MASK

두개의 레이어가 겹쳐있을 때 위쪽의 레이어에 적용

 

흰색이 뚫린부분 ( 마스크이미지 예시 )

 

이런식으로 동작

 

투명한 부분이 뚫려있는 부분(아래쪽 레이어가 보임)

검은색 부분이 막혀있는 부분 = 기존 위쪽 레이어

 

[ 사용 방법 예시 ]

css : on class에 애니메이션 적용

      &.upper {
            background: aqua;
            -webkit-mask: url(../src/mask1.png);
            -webkit-mask-size: 2300% 100%; /*마스크 사이즈 정하는법 : 23장이 있으니까 프레임 하나를 100%로봤을때 2300*/
            -webkit-mask-position: 0% 0%; /*시작위치*/
           
        
        }
        
        &.on {
        .upper {
            animation: mask-play 1.4s steps(22) forwards;
        }

@keyframes mask-play {
    0% {-webkit-mask-position:  0% 0%;}
    100% {-webkit-mask-position:  100% 0%;}
}

.

 

js : section 클릭 시 class on이 붙는 js코드

const section = document.querySelector('section');

section.addEventListener('click', e=>{
    e.currentTarget.classList.add('on');

})

마스크 기능이 Visual Studio Code에서 GO LIVE로 봤을 때는 잘 작동하지만

폴더에서 그냥 열어서 확인 시CORS 에러 발생 주의ㅠ