Inflearn Community Q&A
asked
애플홈페이지 다른 기능에 대해 궁금한 점이 있습니다!
Written on
·
297
0
안녕하세요!
애플 공식사이트 https://www.apple.com/kr/iphone-se/
에서 스크롤 시 svg이미지가 투명해지면서 커지면서 안쪽부터 이미지 또는 동영상이 나오는데. 아무리 개발자 창을 보아도 이해가 되지를 않습니다.
제가 봐야할 키워드 또는 원리를 잠시 가르쳐주실 수 있으실까요??
클론코딩javascriptHTML/CSS웹 디자인인터랙티브-웹svg
Answer 1
1
studiomeal
Instructor
해당 페이지를 개발자 도구에서 살펴보면
.mask와 .masked 두 요소가 있는데요,
.masked안에는 video가 있습니다.
즉 video 위에 일부가 투명한(여기서는 글자 모양이 투명) canvas를 얹어서 마스크 효과를 낸 것입니다.
스크롤 값에 따라 커지고 작아지는건, 우리 수업에서 배운걸 그대로 canvas와 video에 적용하시면 되고요^^