이때 홈화면 전체를 보여주기 위해 body태그에 width, height 값을 100% 로 설정했었는데 스크롤 이벤트를 읽기 위해서는 height 값을 설정하면 스크롤 값을 읽지 못한다. 그래서 화면 전체를 보이고 싶은 div 태그에 100vh로 설정하고 body 태그의 100%값은 빼준다.
.content .sec_home{
position: relative;
background-color: #f7f7e9;
padding-top: 230px;
height: 100vh;
box-sizing: border-box;
}
기본적인 애니메이션은 @keyframes 를 활용하여 자바스크립트에서 style속성을 넣었다.
@keyframes navColor {
from{
color: #f7f7e9;
}
to{
color: #ae360e;
}
이때 유의 해야할 점은 querySelectorAll로 다중 선택자에 바로 style요소를 줄 수 없다는 것이다.
메뉴 전체의 a 태그에 애니메이션을 모두 넣으려면 for문을 활용해야한다.
if(currentScroll >= contactTop-20){
for (var i=0; i<navA.length; i++){
navA[i].style.animation = "navColor .5s ease-out forwards"
}else {
for(var i=0; i<navA.length; i++){
navA[i].style.animation = "colorRed .5s ease-out"
}
}
}
위와같은 방법으로 메뉴 가상선택자에 animation을 넣어보려 했으나 실패했다.
자바스크립트에서 :after :before같은 가상선택자를 잡지 못하기 때문이다.
그래서 setProperty 메소드를 이용해서 css에 함수를 넣는 방법을 썼다.
window.addEventListener('scroll', function(e){
e.preventDefault();
let currentScroll = window.scrollY;
if(currentScroll >= contactTop){
document.documentElement.style.setProperty('--navbar-color', '#f7f7e9');
logo.style.opacity="1"
}else {
document.documentElement.style.setProperty('--navbar-color', '#ae360e');
logo.style.opacity="0"
}
});
스크롤 될때마다 변하는 함수를 정의한 다음 css에 setProperty되는 변수를 선언한다.
.sec_nav li a:after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 0;
height: 2px;
background-color: var(--navbar-color);
transition: all .5s;
}