LHJ

I'm a FE developer.

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

20 Sep 2020 » js_bbc_interaction

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, ….
    를 부여했다.

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