Todolist
visible이 붙어있는 것은 opacity:1 지정함, 불투명도가 1이여서 눈에 보이도록 함. 원래는 opacity의 값이 0이다.
opacity CSS 속성은 요소의 불투명도를 설정합니다. 불투명도는 요소 뒤쪽 콘텐츠가 숨겨지는 정도로, 투명도의 반대이다.
스크롤을 하면 visible class 가 붙은 얘가 1이 되어서 눈에 보이는 것이다. (1->2, 2->3 .. etc) 스크립트로 스크롤 구간에 따라서 graphic-item 의 visible class를 붙였다가 떼었다 하면 된다.
코딩하기 전에 생각하기 🧐
무엇을 기준으로 visible를 붙였다 떼었다 할까? 결국에 이미지는 이 내용에 맞춰서 보여줘야 한다. 내용과 짝을 맞추는 게 가장 중요하다.
아침에 일어나면, 커피를 내리며 정신을 차린다.
위 내용에는 커피를 내리는 이미지가 나와야 한다. 그래서 스크롤을 할 때 각 말풍선의 위치를 기준으로 잡을 것이다. 이 말풍선이 어느정도 올라왔다고 하면 이 말풍선에 해당하는 이미지로 바꿔주는 것이다. 그럼 쌍으로 묶어있어야 한다. 그래야 각각 쌍에 맞는 것들을 보여줄 수 있을 것이다. 가장 단순한 방법인 index에 숫자를 붙여줘서 해결할 것이다. 각 step도 index를 붙여주고, image들도 index를 !
<div data-index="0" class="graphic-item"><img class="scene-img" src="images/00.png" alt=""></div>
data 에 하이푼(-)으로 시작하는 속성은 html 표준이다. 표준으로 custom 속성을 만들 수 있다. data-xxx 이런 방식으로!
각각 태그에 넣어줘도 되긴 하지만, 자바스크립트로 루프를 돌면서 자동으로 붙여주는 방식을 취해보자. 전역변수 사용을 회피하기 위해서 즉시 실행 익명 함수를 만든다. (함수 이름이 없기 때문에 익명함수라고 부름)
이렇게 하는 이유는? 🧐
이 안에서 변수를 만들면 얘는 블럭 안에 있는다. 지역 변수가 되어서 외부에서 접근하지 못한다. 즉 바깥에서 출력하고자 한다면 에러가 발생한다.
뭐가 좋을까? 🧐
보호가 된다. 바깥에다가 해버리면 누구나 접근할 수 있는 값이 되기 때문에 그만큼 위험하고 충돌가능성이 있다. 자바스크립트에서는 기본적으로 전역 변수 사용을 피해주는 게 좋다. 다른 패턴을 이용해서 변수를 공개하기도 한다. 전역변수를 쓰지 않기 위해 함수 안에 선언해주었다. 함수 자체는 호출을 해야 실행되므로 자동으로 바로 호출되도록 호출까지 했다. 각 step, 즉 말풍선과 각 graphic-item 들을 가져오도록 하자.
1. main.js
(() => {
const stepElems = document.querySelectorAll('.step');
const graphicElems = document.querySelectorAll('.graphic-item');
for (let i = 0; i < stepElems.length; i++) {
stepElems[i].setAttribute('data-index', i);
}
})();
다음과 같이 인덱스가 부여됨을 확인할 수 있다.
1. main.js
(() => {
const stepElems = document.querySelectorAll('.step');
const graphicElems = document.querySelectorAll('.graphic-item');
for (let i = 0; i < stepElems.length; i++) {
// stepElems[i].setAttribute('data-index', i);
stepElems[i].dataset.index = i;
}
})();
data-xxxx는 특별한 친구라 다른 방법을 취할 수도 있다. dataset 뒤에다가 부여한 변수를 넣어주면 같은 결과를 도출한다.
출처: 1분 코딩님, BBC 인터랙티브 페이지 "코로나19가 바꿀 사무실의 미래"
https://developer.mozilla.org/ko/docs/Web/CSS/opacity
https://developer.mozilla.org/ko/docs/Learn/HTML/Howto/%EB%8D%B0%EC%9D%B4%ED%84%B0_%EC%86%8D%EC%84%B1_%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0
