새 애니메이션이 작동하지 않습니다.
239
피버미
작성한 질문수 1
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도 따라 써보고 오타 있는지 확인해봐도 움직이지 않네요
답변 1
3
document.querySelector('[data-index="2"] .bird').style.transform = 'translateX(${window.innerWidth}px)';
위 코드에서 템플릿 리터럴 써주셨는지 한번 확인해보세요.
' <- 이 따옴표가 아니라 ` <- 요 백틱 써주셔야해요. (숫자 1 왼쪽에 있는 버튼)
LocationPermission.denied관련 질문입니다
0
585
1
writeHead 부분
0
466
1
로그인페이지, 회원가입페이지 못들어가게하는 부분
0
516
1
강의에서 사용하고 있는 next.js 버전으로 설치는 어떻게 하나요?
0
2342
1
[공유] react-mention 항상 커서 위에 나오게 수정
2
882
3
videocontrollor dispose
0
427
1
user 과 auth에서 인증 부분
0
447
1
onlogotap함수의 video nullable관련질문
0
387
1
채팅대화에서 시간이 중복될경우 안보이게 하는방법 문의.
0
542
1
쿠키에 대해서
0
315
1
next.js 버전이 12인건가요?
0
367
1
오류났을때 참고
3
685
3
style.css 오류
0
307
1
actions 함수 관련 질문
2
400
1
새가 원래자리로 돌아올때도 transition 시간이 필요한데. 돌아올때는 바로 돌아오록 하는 Tip 이 있을까요?
0
249
0
classList 오류가 계속 납니다..ㅜㅜ
0
395
0
action이 true일때 실행되는데 false에서 초기화가 안되요ㅠ
0
334
2
오류가 나는데 찾지를 못하겠어요...
0
375
2
안녕하세요 ~~ 배경으로 깔린 음악이 너무 궁금하네요 ㅎㅎ
0
540
2
actions[action] is not a function 라고 뜹니다
0
993
5
첫번째랑 마지막 요가+폰하는 그림이 높이가 꼬였습니다
0
465
4
forEach로 작성해봤습니다!
1
285
1
안녕하세요, step부분 문의 드립니다.
0
218
1
질문있습니다!
2
310
2