인프런 커뮤니티 질문&답변
작성한 질문수
scene 넘어갈때 애니메이션 효과에 문제가 발생했습니다.
해결된 질문
작성
·
1K
0
안녕하세요!
좋은 강의 감사드립니다!
바로 질문 드리겠습니다.
현재 겪고 있는 문제는 스크롤을 내려서 다음 스크롤 섹션으로 넘어갈 때 다음 스크롤 섹션에 속해 있는 .stiky-elem 요소들이 잠깐 '깜빡' 하면서 보였다가 사라지는 문제입니다.
해결하기 위해 이것저것 건드려본 결과 sceneInfo에서 HeightNum 속성이 다른 섹션보다 높게 설정된 섹션에서만 이런 문제가 발생한다는 것을 발견했습니다. (예를 들어 sceneInfo[2] 만 HeightNum 7을 주면 세번째 섹션으로 넘어갈 때 세번째 섹션에 있는 .sticky-elem들이 잠깐 깜빡하고 사라집니다. 그 다음은 애니메이션 정상 실행 )
그런데 완성 파일의 경우, 특정 섹션의 HeightNum을 높게 설정해도 이런 문제가 전혀 발생하지 않아서 제가 뭔가 놓치고 있는게 있는 것 같은데요, 혹시 scrollLoop 함수에서 document.body.setAttribute('id', `show-scene-${currentScene}`) 이부분이 늦게 처리되고 있는게 아닐까 싶었지만 완성 파일과 비교했을 때 코드 자체는 동일하게 들어가 있습니다. (ㅠㅠ)
calcValues 함수에서 currentYOffset이 value[2]의 start값보다 작을 경우 playAnimation 함수를 통해 value[0]의 값인 <opacity> 0을 출력하게 해놨는데도 무시하고 잠깐 나타났다가 사라지니까 제 선에서는 도저히 해결 방법을 못찾겠습니다. (ㅠㅠㅠ)
빨리 비디오 처리 부분으로 넘어가고 싶은데 섹션 넘어갈때마다 .sticky-elem들이 깜빡거려서 애니메이션이 이어지지 않는 느낌이라, 이 부분을 해결해야 비디오 처리 부분으로 넘어갈 수 있을 것 같아서 질문 드립니다.
감사합니다!!
답변 6
0
0
안녕하세요!
이제 완강을 향해 달려가고 있는데요 해당 깜빡임 부분이 나중 강의에서 언급이 되었었네요
해당 부분 듣고 다시 확인해본 결과 css에서 opacity: 0으로 설정이 안되어있었습니다. (선택자 우선순위 문제)
정말 간단한 문제였는데 직접 만들다보니까 강의에서는 쉽게 넘어갔는데 막상 해보니 안되는 부분이었어서 당황했던 것 같습니다.
좋은 강의 다시 한번 감사드립니다! 유튜브도 시간날때마다 보고 있는데 내용이 너무 좋아서 좀 당황스럽지만 어쨋든 완강 후에 다른것도 수강할 예정입니다.
좋은 하루 되세요!
0
안녕하세요.
어쨋든 문제는 해결되었지만, 아무래도 enterNewScene 코드를 빼는건 임시방편이라고 생각되어 다시 나름대로 해결책을 찾아보았습니다.
→ 바로 위 댓글에서 말씀드린대로 scrollLoop(){} 함수에서 후반부 return문 실행되기 전에 console.log(enterNewScene) 그리고 console.log(currentScene) 두줄을 넣어서 확인해본 결과 씬(스크롤 섹션)이 넘어가는 경계부분 스크롤시에 로그창에서 currentScene 값은 추가(++) 되는데 enterNewScene 값은 true 로 나오는 현상을 발견했습니다.
→ 이유는 정확히 모르겠지만 아마도 씬이 넘어가는 순간에서 scrollLoop()함수 안에 있는 document.body.setAttribute('id', `show-scene-${currentScene}`) 부분이 먼저 실행(return)되고 그다음에 마지막줄에 있는 playAnimation() 호출이 실행되서 이런 딜레이가 발생하는거라고 가정하고 document.body.setAttribute('id', `show-scene-${currentScene}`) 부분을 아예 playAnimation() 함수 안에 (변수 선언 바로 아래)에 넣어주었더니 딜레이가 없어졌습니다.
이렇게 해줘도 큰 문제가 없는지 조금 궁금하기도 하고 해서 댓글 남겼습니다.
빨리 비디오 처리랑 캔버스 부분 듣고 싶었는데 별거 아닌 문제에 너무 시간을 쓴건 아닌지 조금 후회되기도 하는데요, 강의 내용이 좋고 설명도 정말 자세하게 해주셔서 정말 많은 도움이 되고 있습니다! 감사합니다.
0
답변 감사드립니다!
말씀해주신 enterNewScene 부분을 콘솔 로그로 확인해봤는데요,
playAnimation() 함수 아래쪽에
...
console.log(enterNewScene);
if (enterNewScene) return;
playAnimation();
이렇게 확인해보니까 스크롤 섹션이 넘어가는 경계부분에서 순간적으로 로그에 true가 출력되는 걸 발견했습니다 (1회).
그래서 if (enterNewScene) return; 부분을 제거해주니까 경게부분에서도 자연스럽게 애니메이션이 연결되었습니다! (깜빡임 현상 사라짐)
사실 강의를 끝까지 듣고 질문을 남겼어야 하는데, 문제를 정확히 알려주셔서 많은 도움이 되었습니다.
좋은 하루 되세요!!
0
씬이 바뀌는 순간 그런 현상이 발생되는데요,
scrollLoop 함수에서 새로운 씬에 진입한 순간
enterNewScene 변수의 값을 true로 설정하고
if (enterNewScene) return;
playAnimation();
이런 코드를 통해 새 씬에 진입했을 때는 playAnimation()의 실행을 막아주는 방법을 사용한 부분이 있는데요,
혹시 이 부분도 처리 해주셨을까요?
계속 수정이 안되면, 일단 해당 함수를 완성 소스에 있는 것으로 바꾸어 보시고 한번 테스트 해보시는걸 추천드리겠습니다^^
0
왠지 display:none 으로 되어있던 .sticky-elem들이 display:block 으로 바뀌는 과정에서 opacity 값을 무시하고 잠깐 나타나는 것 같은데요, 간단한 문제같은데 해결방법을 못찾아서 질문드렸습니다!