[Framer] Study Day 04(+sketch)
일부 영역 Scroll 기능 구현!
오늘의 공부 범위는 일부 영역에 대한 스크롤 만들기 입니다!!
이미지가 gif 전화시 쫌 깨지게 되는데... 어떻게 하면 깨끗하게 변환하는지 아시는 분 있으시면 알려주세용..ㅜㅜ
추가된 코드scroll1 = new ScrollComponent [ scroll1을 만들겠다는 선언 ]
width :375, height: 667, parent: sketch.page [ 스크롤 화면 사이즈 지정 ]
sketch.M.parent = scroll1.content [ 그룹 M에 속해있는 컨텐츠가 scroll 될것임. ]
[ 상하좌우 스크롤을 막아두어 전체 화면의 이동이 이루어지지 않도록함. ]
scroll1.scrollVertical = false [ 상하 스크롤 안됨 ]
scroll1.scrollHorizontal = false [ 좌우 스크롤 안됨]
[ 저는 좌우만 스크롤 되도록 했기때문에 영역 스크롤은 상하 스크롤을 막아두었어요! ]
scroll2 = ScrollComponent.wrap(sketch.circle) [ scroll 2를 만드는데 영역 스크롤임- wrap으로 영역 별로 만들 수 있습니다.]
scroll2.content.draggable.propagateEvents = false [ 스크롤 컨텐츠가 드레그 되지 않도록 설정 ]
scroll2.scrollVertical = false [ 상하 스크롤이 안됨]
2가지의 풀지 못한 숙제가 있습니다!
1. 좌우 스크롤 작업을 할때, 추가적으로 컨텐츠를 넣는 방법에 대해서, 자세히 말하자면 sketch에서 artboard 밖에 있는 요소들을 불러 올 수 있는지.
2. 현재 구현된 영역이 스크롤 앞에 영역 지정이 잘못됬는데 물론 아래 bg를 깔아서 영역을 늘려주는 야매 방법이 있지만 그렇게 하지 않고 scroll2 자체를 앞으로 끌어올 수 있는 코드 방법
이 두가지는 진짜 3시간을 연구했는데..ㅜㅜ 풀지 못했어요.. 그래서 차차 알아보도록 하려구요.. 흐흐
아 스크롤 코드 사용하는 것에 대해서 자세히 나와 있는 사이트가 있어서 공유합니다!!
https://medium.com/the-school-of-do/framer-cheat-sheet-scroll-components-bd786368ecfc
