-
질문 & 답변
카테고리
-
세부 분야
프론트엔드
-
해결 여부
미해결
action이 true일때 실행되는데 false에서 초기화가 안되요ㅠ
20.11.06 21:38 작성 조회수 146
0
(()=>{
const actions = {
birdFlies(key){
if(key){
document.querySelector('[data-index="2"] .bird').style.transform = `translateX(${window.innerWidth}px)`;
} else{
document.querySelector('[data-index="2"] .bird').style.transform = `translateX(-100%)`;
}
},
birdFlies2(key){
if(key){
document.querySelector('[data-index="5"] .bird').style.transform = `translate(${window.innerWidth}px, ${-window.innerHeight * 0.7}px`;
} else{
document.querySelector('[data-index="5"] .bird').style.transform = `translateX(-100%)`;
}
}
};
const stepElems = document.querySelectorAll('.step');
const graphicElems = document.querySelectorAll('.graphic-item');
let currentItem = graphicElems[0];
let ioIndex;
const io = new IntersectionObserver((entries, observer) => {
ioIndex = entries[0].target.dataset.index * 1;
});
for(let i = 0; i < stepElems.length; i++){
io.observe(stepElems[i]);
stepElems[i].dataset.index = i;
graphicElems[i].dataset.index = i;
}
function activate(action){//활성화
currentItem.classList.add('visible');
if(action){
actions[action](true);
}
}
function inactivate(action){//비활성화
currentItem.classList.remove('visible');
if (action) {
actions[action](false);
}
}
window.addEventListener('scroll', () => {
let step;
let boundingRect;
for(let i = ioIndex - 1; i < ioIndex + 2; 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(currentItem.dataset.action);
}
}
});
window.addEventListener('load', () => {
setTimeout(() => scrollTo(0, 0), 100);
});
activate();
})();
답변을 작성해보세요.
1
jeongbaebang_dev
2020.11.21
inactivate(); // 인수가 빠져있습니다.
inactivate(currentItem.dataset.action); //이런형식으로 인수를 넣어주시면 됩니다.
0
답변 2