티스토리 뷰

javascript30

13 - Slide in on Scroll

fistful 2019. 3. 18. 19:02
반응형

개요

 

1) 사진과 문단간의 레이아웃 이해

2) 사진이 멋지게 움직이며 들어오게 해보자

 

index-START.html

 


 

전체를 싸주는 클래스는 site-wrap

 

text-align: justify 뭐였더라?

- 한글로는 양쪽 정렬.

- 왼쪽 오른쪽 끝이 각각 왼쪽, 오른쪽 정렬인 것처럼 만들고

- 중간의 여백 크기를 적절히 조절해주는 것이다.

 

 

.align-left

 

- float: left

- 이미지 박스를 왼쪽에 띄운다.

- 그러면  text 오른쪽에 위치하게 된다.

- 참고링크: https://goo.gl/GyyRsj

- margin-right: 20 px 만큼 text 와의 공간을 띄우는 거다.

 

나머지는 실제 java script 구현부에서 좀더 들여다 보자.

* index-START.html 에서는 아직 이미지가 보이지 않는다.

 

이미지들이 텍스트와 어떻게 어우러지나 개념만 보자.

 

p 태그 이어지다가, align-left slide-in 이미지 하나

- 왼쪽에 이미지, 오른쪽에 텍스트가 있다.

 

p 태그 이어지다가, align-right slide-in 이미지 하나

- 오른쪽에 이미지, 왼쪽에 텍스트가 있다.

 

p 태그 이어지다가 align-left slide-in 이미지 하나

그리고, 이번에는 p 태그 안에 align-right slide-in 이미지 하나

 

p 태그와 동등한 레벨에서 img 들어가면 다음 p 태그와 어우러지지만

p 태그 내에 img 들어가면 안에서 왼쪽과 같이 어우러진다.

 

 

 

p 태그 이어지다가, align-right slide-in 이미지 하나

- 오른쪽에 이미지, 왼쪽에 텍스트가 있다.

 

index-FINISHED.html

 

 


 

아래 window scroll event callback 에서

 

- 바로 checkSlide() 함수를 부르면 너무 많이 실행됨

- debounce() 함수를 거쳐  실행되면 횟수 조절이 가능해짐

 

궁금증. 어짜피 scroll  event 여전히 같은 회수만큼 반복되고,

그만큼 callback 함수를 호출하는 것이 아닌가?

 

코드 분석 1

1) callNow 일단 여기 구현에서는

- immediate 디폴트 값인 true 이고, timeout undefined (= false) 이므로

- callNow == true 이다.

2) clearTimeout(timeout) 결국 clearTimeout(undefined) 인데 이건 아무 의미도 없다.

3) 여기서 wait 20 이니깐 20ms 뒤에 later 함수가 실행되게 해놓고

4) 현재로서는 callNow == true 이니 넣어둔 함수인 func 실행된다.

func.applay(context, args);

 

 

코드 분석 2

타이밍에서 한번 event 발생했다고 해보자.

1) timeout null 아니니, callNow == false 되어 아래줄이 실행되지 않는다.

- event 발생하는 줄줄이 여기에 걸려서 20ms 동안은  event 흘려보낸다

- wait = 20 이라서 20 ms

2) 그러고 20 ms 지나면 timeout 다시 null 만들어주니 event 걸리게 된다.

- wait 파라미터에 1 이나 2 정도를 넣어주는 테스트를 해보면

- 부분을 이해할 있다.

3) immediate false 해주면 event 발생후 wait 시간 이후에 동작하게 것이다.


 

아래로 스크롤시 이미지가 절반쯤 나타나고,  (AND), 아직 화면에서 사라지지 않았다면,

'active' class 먹인다.

 

scroll event 시에 debounce 먹인 checkSlide 실행시킨다.

.slide-in 모든 img tag 들이 가지고 있다.

 

window.scrollY: 전체 화면중 현재 화면의 위쪽의 pixel y

window.innerHeight: 현재 화면의 높이값

따라서 둘을 더하면 현재 화면 아래쪽의 pixel y 값이 된다.

여기에 sliderImage.height / 2 빼준 값이 slideInAt 이다. 

 

sliderImage.offsetTop: 전체 화면중 이미지의 위쪽의 pixel y

따라서 sliderImage.offsetTop 불변하는 값이다.

 

isHalfShown: 계산해보면 화면 아래에서 이미지가 절반 이상 보이는지를 체크한다.

위처럼 아래로 스크롤시 화면에 이미지 절반이 나타나는 타이밍을 확인한다.

이번에는 아래에서 위로 스크롤시를 챙겨보자

 

imageBottom: 전체 화면중 이미지의 아래쪽의 pixel y . 불변이다.

isNotScrolledPast: 현재 화면의 위쪽보다 이미지의 아래쪽이 큰지를 체크

- 참이면 아직 화면에서 사라지지 않았다는 것이다.

 

1) 기본적으로 모든 이미지들은

 

- .slide-in 으로 투명하고,

- 모든 transition 발생시 0.5초간 애니메이션 해준다

 

2) .align-left.slide-in  그리고 .align-right.slide-in

 

- 개의 class 붙어서 명시되었는데 별거 아니다. 그냥 AND 생각하면 된다.

- , .align-left slide-in 있는 element

- 참고링크: https://goo.gl/rVZaWV

 

3) 마찬가지로 .slide-in.active class 명시한 element 된다.

 

 


반응형

'javascript30' 카테고리의 다른 글

15 - Local Storage  (0) 2019.03.26
14 - JavaScript References VS Copying  (0) 2019.03.19
13 - Slide in on Scroll  (0) 2019.03.18
12 - Key Sequence Detection  (0) 2019.03.15
11 - Custom Video Player  (0) 2019.03.14
10 - Hold Shift and Check Checkboxes  (0) 2019.03.12
댓글
댓글쓰기 폼