인터렉티브 웹 - BBC 사이트 따라해보기2

좀 오랜시간이 지난 후 돌아온 긴 두번째 BBC 사이트 따라해보기 글입니다.

텀이 길어요...

 

이전글은 아래를 참고해주세요.

 

인터랙티브 웹 - BBC 사이트 따라해보기1

 

BBC 사이트 따라해보기2 강의 링크도 아래 둘게요~!

 

 

 

열심히 따라하는 중.

 

 

 

---

 

1. Element에 data(속성)을 추가하는 방식은 두가지

- setAttribute

    - ex : Elems[i].setAttribute( 'data-index', i)

- dataset

    - Elems[i].dataset.index = i;

 

2. JS에서 변수의 TRUE, FALSE란

if(currentItem) // currenItem이 있다면 True
{
	currentItem.classList.remove('visible');
}

이런 문장이 가능하다.

위 코드에서 currentItem이라는 변수가 비어있다면 False, 값이 무언가 할당 되어 있다면 True이다.

내가 만약 1(True),0(False) 값을 넣으면 어떻게 되는가?

 

test = false;
if (test)
{
    console.log(test);
}

콘솔에 아무것도 보여지지 않는다. 즉, test값이 false로 바로 인식되었다는 의미.

그럼 위와 같은 코드는 위험한 것 같다.

 

 

3. Intersection Observer

자바스크립트에 있는 기능.

어떤 요소가 화면에 보이는지 아닌지를 알 수 있다.

디테일한 내용은 구글링 해보자.

여기서 주의해서 볼건 target. 이 target에 우리가 관찰하고 있는 클래스가 연결, 혹은 지정 되어 있다.

dataset 값등을 활용 할 수 있게 됨.

 

Intersection Observer 활용전

        for (let i = 0; i < stepElems.length; i++)
        {
            step = stepElems[i];
            boundingRect = step.getBoundingClientRect();
            // console.log(i);
            // console.log(boundingRect);
            if ( boundingRect.top > window.innerHeight * 0.1 &&
                 boundingRect.top < window.innerHeight * 0.8 )
            {

                inactivate();
                currentItem = graphicElems[step.dataset.index];
                activate();
            }

        }

 

Intersection Observer 활용후

 

        //for (let i = 0; i < stepElems.length; i++)
        for (let i = ioIndex - 1; i <= ioIndex + 1; i++)
        {
            step = stepElems[i];
            if (!step) continue;
            boundingRect = step.getBoundingClientRect();
            
            if ( boundingRect.top > window.innerHeight * 0.1 &&
                 boundingRect.top < window.innerHeight * 0.8 )
            {

                inactivate();
                currentItem = graphicElems[step.dataset.index];
                activate();
            }

        }