인터랙티브 웹 클론 Chapter 02 - BBC "코로나19가 바꿀 사무실의 미래"

1편에 이어서~ 각 이미지 (.graphic-item)에게 opacity:0;을 해주었고 각 구간마다 보여주기 위해서 

이미지에 .visible이라는 클래스를 주어지게한다! 붙였다 뗐다!

이미지가 나올 부분은 말풍선이랑 맞아야하기때문에 이미지랑 말풍선이 쌍으로 맞아야 한다.

=> 이미지와 말풍선을 인덱스로 맞춰준다. 이미지 0 = 말풍선 0 

 

이걸 어떻게 하느냐! html 각 이미지와 말풍선에 "data-index"를 넣는다! html코드에 일일히 다 넣어주기 보다는 javascript에서 반복문으로 실행시켜준다.

 

즉시실행함수를 이용하여 안에 코드를 작성한다! 먼저 각 말풍선, 이미지들을 가져오고 반복문으로 넣어준다

setAttribute로 넣어줄수도 있지만 dataset으로 넣어줄 수도 있다!

 

스크롤할때의 이벤트 추가! 스크롤할때 말풍선의 x, y, width, height, top 등등 좌표값이 나올 수 있도록

getBoundingClientRect 함수를 사용한다! 

 

보이는 화면의 높이가 100%라고 했을때 한 10%에서 80% 사이에 들어오면 바뀌도록! 

console.log로 찍어보면 스크롤 할때 첫번째 말풍선이 window의 창 높이 80% 안으로 들어왔을때 1이라고 찍힌다.

 

위에서 순차대로 찍히는 걸 봤으니 이제 그걸 이미지 순번에 넣어준다 => graphicElems[step.dataset.index] 

그리고 이미지를 보여주기 위해 visible클래스를 추가하게되는데, 삭제하지않고 추가만 하게 되므로 스크롤할때마다 이미지가 쌓인다. 그래서 현재 활성화 된 것을 변수를 만들어서 안에 넣어준다. 

 

currentItem을 만들어준 뒤,

 

스크롤했을때 currentItem이 있으면 먼저 visible을 삭제해주고 다음 활성화된 아이에게 visible을 추가해준다.

 

코드를 깔끔하게 함수 두 개를 생성해서 정리하는 것이 더 낫다! 활성화될때는 activate() 비활성화는 inactivate() 함수로 넣는다. 그런데 처음 화면을 실행했을때 첫 이미지가 등장하지 않는다.

그러므로

let currentItem = graphicElems[0]; // 이미지의 첫번째를 넣어준다.

그리고 activate()를 실행하면 첫 이미지가 등장한다! 

 

근데 지금 for문으로 모든 이미지를 다 돌리기에는 너무 낭비이다. 화면에서 보이는 말풍선과 그 전꺼 그 후에꺼 3개만 비교하면 된다! 그래서 for문 대신 Intersection Observer를 사용한다.

 

for문도 3개만 반복될 수 있게 변경해준다. 

 

 

 

이어서...!