자꾸 질문만하네요..
혼자 찾아보려고 삽질하다가 도저히 모르겠어서 올립니다 😂😂😂 계속 actions[action] is not a function라고 뜨는데 뭐가 문제일까요..
(() => {
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%)`;
}
}
}
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].setAttribute('date-index', 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;
let temp = 0;
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);
}
}
});
activate();
})();