가려진 제목이 드러나는 효과 · Mask reveal

가림막의 경계를 이동시켜 글자나 이미지를 점차 드러내는 효과

조회 0추천 0

직접 만든 예시

[제목]에 왼쪽에서 오른쪽으로 열리는 mask reveal을 적용해줘. CSS clip-path로 700ms 동안 가림 영역을 줄이고 글자 자체는 움직이지 않게 해줘. 모션 감소 시 완성 상태로 보여줘.

빈칸을 내 상황에 맞게 채워 사용하세요.

입력과 결과 비교

설명용 예시

입력 제목이 멋있게 나타나게 해줘.

글자는 제자리 · 왼쪽부터 가림막이 걷히며 문장이 드러남

활용 방식을 보여주는 예시이며, 직접 실행한 결과가 아닙니다.

페이드와 달리 글자의 선명도는 유지하면서 보이는 영역을 바꿉니다. “커튼이 열리듯”이라는 시각적 요구를 구현 기법으로 연결합니다.

전문 용어를 활용해 mouseco가 작성한 문구입니다. 출처는 용어와 기법의 참고 문서입니다. 원출처 ↗

기존 가이드와 자세한 사용법 읽기

안녕하세요 mouseco 입니다. :)

Mask reveal · Clip-path은 가림막의 경계를 이동시켜 글자나 이미지를 점차 드러내는 효과입니다.

막연한 요청을 구체적인 문구로

기존 요청: 제목이 멋있게 나타나게 해줘.

[제목]에 왼쪽에서 오른쪽으로 열리는 mask reveal을 적용해줘. CSS clip-path로 700ms 동안 가림 영역을 줄이고 글자 자체는 움직이지 않게 해줘. 모션 감소 시 완성 상태로 보여줘.

글자는 제자리 · 왼쪽부터 가림막이 걷히며 문장이 드러남

예시는 위 기법을 보여주기 위해 직접 제작했습니다. 수치와 업무 상황은 가상이며 특정 모델의 성능 비교 결과가 아닙니다.

페이드와 달리 글자의 선명도는 유지하면서 보이는 영역을 바꿉니다. “커튼이 열리듯”이라는 시각적 요구를 구현 기법으로 연결합니다.