-
카테고리
-
세부 분야
프론트엔드
-
해결 여부
미해결
새 애니메이션이 작동하지 않습니다.
20.12.23 18:33 작성 조회수 108
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 = 'translateX(${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]; //현재 활성화된 (visible 클래스가 붙은) .graphic-item을 지정
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);
}
}
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){
if(currentItem){
inactivate();
}
currentItem = graphicElems[step.dataset.index];
activate(currentItem.dataset.action);
}
}
})
activate();
})();
일단 콘솔 오류창에서 아무 오류도 안나는데 새 애니메이션이 전혀 작동하지 않습니다.
CSS도 따라 써보고 오타 있는지 확인해봐도 움직이지 않네요
답변을 작성해보세요.
3
Soom
2021.02.28
document.querySelector('[data-index="2"] .bird').style.transform = 'translateX(${window.innerWidth}px)';
위 코드에서 템플릿 리터럴 써주셨는지 한번 확인해보세요.
' <- 이 따옴표가 아니라 ` <- 요 백틱 써주셔야해요. (숫자 1 왼쪽에 있는 버튼)
답변 1