반응형 동영상 + 동영상의 높이 값에 따라 바뀌는 header css

*HTML

<header>
  <nav>
    <ul>
      <li>메뉴1</li>
      <li>메뉴2</li>
      <li>메뉴3</li>
    </ul>
  </nav>
</header>

<section id="video">
    <video autoplay muted loop>
      <source src="./video/ex.mp4" type="video/mp4">
    </video>
</section>

video, iframe 등 동영상을 링크하는 태그를 부모요소로 감싸준 마크업을 준비

 

*CSS

/* 헤더 기본 css */
header {
  height: 90px;
  width: 100%;
  position: fixed;
  top: 0;
  background-color: #fff;
  opacity: .8;
  transition: all .3s;
  z-index: 100;


/* 반응형 동영상 */
#video {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
}
#video video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

헤더메뉴

상단에 고정되는 헤더메뉴를 만들 경우 동영상 요소를 넘어 스크롤 됐을 때 투명도를 조절하려 한다

반투명->투명으로 변경하기 위해 opacity값을 지정하고 애니메이션 효과를 주고 싶을 경우 transition을 지정한다.

동영상

부모요소에 포지션을 부여하고 동영상의 비율(16:9)를 맞추기 위해 padding-bottom으로 높이값을 설정해준다.

video태그는 부모요소의 크기에 따라 동적으로 변할 수 있게 만들어준다

보통은 video, iframe 등은 부모요소의 크기에 상관없이 크기를 갖기 때문에 position으로 종속시킨다.

 

jQuery

$(window).on("scroll",function(){
  const videoHeight = $("video").height();
  if($(window).scrollTop()>videoHeight) {
    $("#header").css({"opacity":"1"});
  } else {
    $("#header").css({"opacity":"0.8"});
  }
});

(header의 바로 아래에 동영상이 출력되는 경우)

window의 scroll이벤트를 이용하여 header의 css를 변경했다

우선 video의 높이값을 변수에 저장한 뒤 윈도우를 스크롤 했을 때의 스크롤값이 video의 높이값보다 커질 경우 header을 불투명하게 하고 아닐경우 반투명하게 하도록 했다.