bbc interaction 공부 1

bbc covid19 page에서 사용한 인터렉션 기법

1. position : sticky; top: 0; height: 100vh;

   sticky 속성을 준 요소는 height를 따로 안잡는다.
   따라서 height를 설정할 필요가 있다.
   또한 sticky 속성은 IE에서는 아예 지원을 안한다.
   참고문헌 : 링크

   IE는 javascript를 통해 position:fixed로 처리를 해야된다.

2. 마크업 구조

   scroll할 때 인터렉션이 일어나는 영역은 scroll-content 요소 안에,
   그냥 기본대로 있는 영역은 normal-content 요소 안에 넣었다.

3. javascript (dataset 활용)

   자바스크립트로 loop를 돌려 각 이미지에 data-index= 1, 2, 3, 4, ….
   각 텍스트에 data-index= 1, 2, 3, 4, ….
   를 부여했다.

   그리고 서로 매칭시켜 인터렉션을 구현했다.