[질문]링크된 사이트에 외곽 테두리가 안으로 펼쳐지게 하는 방법?
Glisten
2023.04.01
http://www.cyon.co.kr/event/suit/index.jsp?idx=4
사이언 핸드폰 홍보 사이트인데요
다운로드란에 들어가면 월페이퍼 다운받는 UI중
사각박스의 Stroke가 안쪽으로 생기는 애니메이션은 어떻게 구현하는건지 궁금합니다.
외곽으로 퍼져나가게는 쉽게 할 수 있을거 같은데 안쪽으로 확장되는 건 혼자 고민해도 방법이 떠오르질 않네요...마스크를 써도 안되는거 같고 ㅠ
혹시 스크립트를 써야하는 거라면 2.0을 기준으로 알려주시면 감사하겠습니다 ㅠㅠ
-
샹1큼해
스트로크라고만 생각하니까 어렵다고 느끼시는듯 하네요.
사진과 동일한 크기의 사각형 면판을 가장 밑에 깔고...
사진을 그 위로 올리고...
동시에 사진과 동일한 크기의 마스크를 씌워놓은 상태에서...
위에 스미리돈님이 말씀하신것처럼 마우스 롤오버 이벤트가 일어나면 그 사진 위의 마스크의 크기를 조절해서 표현하는 거죠.
일종의 트릭 아닌 트릭입니다. (트릭이라고 하기에는 너무 많이 알려진) -
환히찬
제가 볼때는 스트로크되는 이미지를 컨트롤 한게 아니라 바탕이 되는 스트로크는 뒤에 깔고 이지 부분에서 마스크를 써서 이미지 부분의 마스크의 사이즈를 줄여서 저렇게 효과를 준듯하네요 ^^: