Today I Learned
어떤 문제가 있었는지
오늘은 프로젝트 제출 날이였는데 다른 팀원들 홈페이지를 보니깐 상당부분 애니메이션과 댓글이 적용되어 있었다
댓글이야 저번에 해봐서 알지만 애니메이션은 JS/CSS 왕초보인 나에겐 너무 생소한 기능이였다.
코드가 궁금해져서 git 레파지토리를 요청했고 클론코딩을 해보았다.
내가 시도해 본 것들
먼저 받은 코드를 보니 JS와 CSS를 활용애니메이션이 추가 되어 있었다.
//스크롤이벤트가 나타날때마다 함수를 호출하겠다
window.addEventListener("scroll", function () {
//index.html의 teamcontents/ 일치하는 요소를 들고와라
let backteam = document.querySelector(".teamcontents"); //팀목표,팀약속,팀규칙
let backhello = document.querySelector("#teammain"); //welcome
let showteam = document.querySelector(".team"); //소개합니다
//스크롤의 높이를 가져오는것
let value = window.scrollY;
console.log("scrollY", value);
//스크롤 높이에 따라 애니메이션이벤트 발생
//forwards 한번가면 안돌아옴
if(value > 280 && value < 550) {
showteam.style.animation = "showtext 3s ease-out"; //소개합니다가 나타남
} else {
showteam.style.animation = "hidetext 2s ease-out forwards"; //소개합니다가 사라짐
}
if (value > 1100 || value < 300) {
backteam.style.animation = "backslide 1s ease-out forwards" //팀규칙 등이 옆으로 사라짐
} else if(value > 410) {
backteam.style.animation = "slide 2s ease-out"; //팀규칙 등이 옆에서 나타남
}
if(value > 200) {
backhello.style.animation = "uphello 2s ease-out forwards"; //welcome이 위로 올라가면서 사라짐
} else {
backhello.style.animation = "downhello 2s ease-out"; //welcome이 아래로 내려오면서 나타남
}
}).teamcontents {
height: 600px;
padding: 10px;
padding-top: 30px;
/*가로*/
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
animation: slide 2s ease-out;
}출처 - 공민영님 깃허브 https://github.com/Kminy98/firstproject
이 JS부분을 이제 우리 코드에 넣어보았다.
문제점이 있었다. 우리의 웹페이지 스크롤과 다른팀에서 설정한 웹 페이지 스크롤이 맞지 않았었고
querySelector 의 클래스명과 ID명이 달랐다.
어떻게 해결 했는지
window.addEventListener("scroll", function () {
let backteams = document.querySelectorAll(".teamcontents"); // 모든 요소 선택
// 스크롤 높이를 가져오는 것
let scrollHeight = document.documentElement.scrollHeight;
let clientHeight = document.documentElement.clientHeight;
let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
let value = scrollTop / (scrollHeight - clientHeight);
// NodeList를 forEach 메소드로 반복하여 각 요소에 대해 애니메이션 적용
backteams.forEach(function (backteam) {
if (value < 0.005) {
backteam.style.animation = "backslide 1s ease-out forwards";
} else if(value > 0.005) {
backteam.style.animation = "slide 2s ease-out";
}
});
});
다음 코드는 바꾼 코드이다
먼저 기존 코드는 scroll의 절대값을 기준으로 코딩이 되어 있었는데
이를 상대값으로 바꾼 후에 적용시켜 보았다
원하던 것처럼 스크롤에 따라 Gamepost가 생기거나 없어지는것을 확인했는데
내가 원하던것과는 달라서 조금 아쉬웠다
내가 원하는 목표는 게시글마다 있는 <hr> 의 화면에서의 위치를 확인하고 해당 게시글이
애니메이션으로 생기고 없어지는 것이 목표였다.
결국 원하는 목표까지는 해결하지 못했다ㅠ
중간에 다른 방법들도 해보았지만 모두 원하는 방법대로 되진 않았다
아쉽지만 절충안으로 한번에 모든 게시글이 보이고 사라지는 코드로 작성하였다.
무엇을 새롭게 알았는지
현재 페이지의 전체 스크롤 높이를 설정 후 상대값으로 바꿔서 적용시키는 부분을 알게되었다.
// 스크롤 높이를 가져옴
let scrollHeight = document.documentElement.scrollHeight;
let clientHeight = document.documentElement.clientHeight;
let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
// 상대적 스크롤 높이를 지정
let value = scrollTop / (scrollHeight - clientHeight);
또 그에 맞게 애니메이션을 추가하는 코드를 알 수 있었다
backteam.style.animation = "backslide 1s ease-out forwards";
이 부분이 그 코드인데 해석을 해보자면
querySelector로 backteam으로 정의된 클래스의 요소인 style의 animation값을 지정해주는 코드이다.
그래서 기존에 있던 애니메이션 요소를 위 값으로 바꿔주면서 추가적인 애니메이션 효과가 발생하는 것이다.
