(() => {
const stepElems = document.querySelectorAll('.step'); //말풍선
const graphicElems = document.querySelectorAll('.graphic-item'); //그림
let currentItem = graphicElems[0]; //현재 활성화된(visible클래스가 붙은) .graphic-item을 지정
for (let i = 0; i < stepElems.length; i++) {
//stepElems[i].setAttribute('data-index', i);
stepElems[i].dataset.index = i; //html속성으로 data-index준거랑 같음
graphicElems[i].dataset.index = i;
}
function activate() {
currentItem.classList.add('visible');
}
function inactivate() {
currentItem.classList.remove('visible'); //currentItem에 visible붙은 애가 활성화 되어있으면 remove하시요
}
window.addEventListener('scroll', () => {
let step;
let boundingRect;
for (let i = 0; i < stepElems.length; i++){
step = stepElems[i];
boundingRect = step.getBoundingClientRect();
//말풍선 위치를 찍는당
if (boundingRect.top > window.innerHeight * 0.1 &&
boundingRect.top < window.innerHeight * 0.8) {
inactivate();
currentItem = graphicElems[step.dataset.index];
activate();
}
}
});
activate();
}) ();코드를 입력하세요
```(() => {
const stepElems = document.querySelectorAll('.step'); //말풍선
const graphicElems = document.querySelectorAll('.graphic-item'); //그림
let currentItem = graphicElems[0]; //현재 활성화된(visible클래스가 붙은) .graphic-item을 지정
for (let i = 0; i < stepElems.length; i++) {
//stepElems[i].setAttribute('data-index', i);
stepElems[i].dataset.index = i; //html속성으로 data-index준거랑 같음
graphicElems[i].dataset.index = i;
}
function activate() {
currentItem.classList.add('visible');
}
function inactivate() {
currentItem.classList.remove('visible'); //currentItem에 visible붙은 애가 활성화 되어있으면 remove하시요
}
window.addEventListener('scroll', () => {
let step;
let boundingRect;
for (let i = 0; i < stepElems.length; i++){
step = stepElems[i];
boundingRect = step.getBoundingClientRect();
//말풍선 위치를 찍는당
if (boundingRect.top > window.innerHeight * 0.1 &&
boundingRect.top < window.innerHeight * 0.8) {
inactivate();
currentItem = graphicElems[step.dataset.index];
activate();
}
}
});
activate();
}) ();
<loop적게 돌게하기-step개수가 많아져도>
※Intersection observer: 어떠한 요소가 눈에 보이는지 안보이는지 체크 가능(for문 줄이기 위해서 사용)-기능 多(참고: heropy.blog)
-> 관찰하는 대상들이 나타나거나 사라지는 그 시점마다 callback함수가 실행된다
여기선 총 3개(위아래 말풍선, 그림)만 체크해주면 안전하게 잘 돌아간다..
우리는 이중 target(div.step)을 사용할 것이다.
(() => {
const stepElems = document.querySelectorAll('.step'); //말풍선
const graphicElems = document.querySelectorAll('.graphic-item'); //그림
let currentItem = graphicElems[0]; //현재 활성화된(visible클래스가 붙은) .graphic-item을 지정
let ioIndex;
const io = new IntersectionObserver((entries, observer) => { //io 라는 변수를 통해서 observe관찰 시킴
ioIndex = entries[0].target.dataset.index * 1; //index는 숫자로 바꾸기(문자열->숫자: * 1)
});
for (let i = 0; i < stepElems.length; i++) {
io.observe(stepElems[i]);//모든 stepElems가 관찰 대상으로 등록 된다
//stepElems[i].setAttribute('data-index', i);
stepElems[i].dataset.index = i; //html속성으로 data-index준거랑 같음
graphicElems[i].dataset.index = i;
}
function activate() {
currentItem.classList.add('visible');
}
function inactivate() {
currentItem.classList.remove('visible'); //currentItem에 visible붙은 애가 활성화 되어있으면 remove하시요
}
window.addEventListener('scroll', () => {
let step;
let boundingRect;
//for (let i = 0; i < stepElems.length; i++){
for (let i = ioIndex - 1; i < ioIndex + 2; i++){ // 현재 실행중인 observer의 전꺼랑 다음꺼만 검사를 해주는 것
step = stepElems[i];
if(!step) continue; //step에 값이 없다면 그냥 밑에꺼 하세여
boundingRect = step.getBoundingClientRect();
//말풍선 위치를 찍는당
if (boundingRect.top > window.innerHeight * 0.1 &&
boundingRect.top < window.innerHeight * 0.8) {
inactivate();
currentItem = graphicElems[step.dataset.index];
activate();
}
}
});
}) ();
target이라는 변수 사용
현재 index의 전후만 체크해준다