인프런 영문 브랜드 로고
인프런 영문 브랜드 로고

인프런 커뮤니티 질문&답변

김찬기님의 프로필 이미지
김찬기

작성한 질문수

애플 웹사이트 인터랙션 클론!

최종 작업물 살펴보기, 그리고 전하는 이야기

애플홈페이지 다른 기능에 대해 궁금한 점이 있습니다!

작성

·

287

0

안녕하세요! 

애플 공식사이트 https://www.apple.com/kr/iphone-se/

에서 스크롤 시 svg이미지가  투명해지면서 커지면서 안쪽부터  이미지 또는 동영상이 나오는데. 아무리 개발자 창을 보아도 이해가 되지를 않습니다. 

제가 봐야할 키워드 또는 원리를 잠시 가르쳐주실 수 있으실까요??

답변 1

1

1분코딩님의 프로필 이미지
1분코딩
지식공유자

해당 페이지를 개발자 도구에서 살펴보면
.mask와 .masked 두 요소가 있는데요,
.masked안에는 video가 있습니다.

즉 video 위에 일부가 투명한(여기서는 글자 모양이 투명) canvas를 얹어서 마스크 효과를 낸 것입니다.
스크롤 값에 따라 커지고 작아지는건, 우리 수업에서 배운걸 그대로 canvas와 video에 적용하시면 되고요^^

김찬기님의 프로필 이미지
김찬기

작성한 질문수

질문하기