13 - Slide in on Scroll

개요

 

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 가 된다.