-
질문 & 답변
카테고리
-
세부 분야
프론트엔드
-
해결 여부
미해결
애플홈페이지 다른 기능에 대해 궁금한 점이 있습니다!
20.05.23 00:26 작성 조회수 221
0
안녕하세요!
애플 공식사이트 https://www.apple.com/kr/iphone-se/
에서 스크롤 시 svg이미지가 투명해지면서 커지면서 안쪽부터 이미지 또는 동영상이 나오는데. 아무리 개발자 창을 보아도 이해가 되지를 않습니다.
제가 봐야할 키워드 또는 원리를 잠시 가르쳐주실 수 있으실까요??
답변을 작성해보세요.
1
1분코딩
지식공유자2020.05.25
해당 페이지를 개발자 도구에서 살펴보면
.mask와 .masked 두 요소가 있는데요,
.masked안에는 video가 있습니다.
즉 video 위에 일부가 투명한(여기서는 글자 모양이 투명) canvas를 얹어서 마스크 효과를 낸 것입니다.
스크롤 값에 따라 커지고 작아지는건, 우리 수업에서 배운걸 그대로 canvas와 video에 적용하시면 되고요^^
답변 1