[TIL]2023.03.15 / 팀 소개 웹 사이트 project (스크롤 이벤트)

목표

• 버튼 클릭시 이미지 변경하기
• 스크롤 위치에 따라 이벤트 발생되게 하여 역동적인 사이트 구축

---

참고자료

---

내용

 

스크롤을 위나 아래로 움직일 때마다 스크롤 높이에 따라 이미지가 옆에서 나타났다가 다시 옆으로 사라지게 하려고 js에 입력

/*슬라이드를 다시 뒤로 보내는 것*/
//index.html의 teamcontents/ 일치하는 요소를 들고와라
let backteam = document.querySelector(".team");
//스크롤이벤트가 나타날때마다 함수를 호출하겠다
window.addEventListener("scroll", function () {
    //스크롤의 높이를 가져오는것
    let value = window.scrollY;
    console.log("scrollY", value);
    //스크롤 높이에 따라 애니메이션이벤트 발생
    if (value > 400) {
        backteam.style.transition = "backslide 1s ease-out"
    }
})

css에 애니메이션 주는 법

/*나타나는 슬라이드 애니메이션*/
@keyframes slide {
    from{
        margin-left:-300px;
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/*사라지는 슬라이드 애니메이션*/
@keyframes backslide {
    from{
        opacity: 1;
    }
    to {
        margin-left:-300px;
        opacity: 0;
    }
}

---

문제 (해결하기 어려웠던 일이나 에러)

스크롤 이벤트가 생길 때 마다 이미지가 움직이는 효과 시도 중에 에러발생

Uncaught TypeError: Cannot read properties of null (reading 'style') at index.js:33:18

---

시도 (문제가 생긴 이유와 해결하기 위해 시도해본 것들)

스크롤 이벤트가 생길때마다 호출 할 수 있는 함수 만들기

이미지가 움직일 수 있도록 css에 에니메이션 주기

let backteam = document.querySelector(".teamcontents"); 에서 class teamcontents을 찾을 수 없어서 backteam 값이 null이 되어 생기는 오류라고 생각함

js에 querySelector을 querySelectorAll로 수정

---

해결 (최종적으로 해결이 되었을 때 시도한 것 정리)

스크롤 높이는 가져와지는데 계속 에러가 남

---

마무리 (내가 새롭게 알게 된 것이나 짧은 정리)

scrollY로 스크롤의 높이를 가지고 올 수 있음

애니메이션 주는 법

이미지 url 마다 class 이름을 다르게 주어 css를 만들고 버튼을 누를 때 마다 class 이름이 변경 되도록 시도 해봄