action이 true일때 실행되는데 false에서 초기화가 안되요ㅠ
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();
})();
인터랙티브-웹
클론코딩
回答 2
1
inactivate(); // 인수가 빠져있습니다.
inactivate(currentItem.dataset.action); //이런형식으로 인수를 넣어주시면 됩니다.
LocationPermission.denied관련 질문입니다
0
588
1
writeHead 부분
0
469
1
로그인페이지, 회원가입페이지 못들어가게하는 부분
0
519
1
강의에서 사용하고 있는 next.js 버전으로 설치는 어떻게 하나요?
0
2346
1
[공유] react-mention 항상 커서 위에 나오게 수정
2
885
3
videocontrollor dispose
0
431
1
user 과 auth에서 인증 부분
0
450
1
onlogotap함수의 video nullable관련질문
0
391
1
채팅대화에서 시간이 중복될경우 안보이게 하는방법 문의.
0
545
1
쿠키에 대해서
0
319
1
next.js 버전이 12인건가요?
0
370
1
오류났을때 참고
3
686
3
style.css 오류
0
307
1
actions 함수 관련 질문
2
401
1
새가 원래자리로 돌아올때도 transition 시간이 필요한데. 돌아올때는 바로 돌아오록 하는 Tip 이 있을까요?
0
249
0
classList 오류가 계속 납니다..ㅜㅜ
0
395
0
새 애니메이션이 작동하지 않습니다.
0
239
1
오류가 나는데 찾지를 못하겠어요...
0
377
2
안녕하세요 ~~ 배경으로 깔린 음악이 너무 궁금하네요 ㅎㅎ
0
540
2
actions[action] is not a function 라고 뜹니다
0
995
5
첫번째랑 마지막 요가+폰하는 그림이 높이가 꼬였습니다
0
467
4
forEach로 작성해봤습니다!
1
285
1
안녕하세요, step부분 문의 드립니다.
0
218
1
질문있습니다!
2
310
2