스크롤 이벤트 페이지

누리·2022년 8월 12일
0
post-thumbnail

1.스크롤로 무한 텍스트 플로우되는 홈화면 구현

이때 홈화면 전체를 보여주기 위해 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;
  }

2.스크롤 높이에 따라 특정 요소에서 메뉴 컬러테마 바꾸기

2.1 keyframe 활용하기

기본적인 애니메이션은 @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"
          }
        }
    }

2.2 css에 함수 넣기

위와같은 방법으로 메뉴 가상선택자에 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;
  }
profile
프론트엔드 개발자

0개의 댓글