바닐라 JavaScript : 애니메이션 스티커 내비게이션 메뉴 작성

코어 포인트

jQuery 플러그인없이 애니메이션 스티커 내비게이션 메뉴를 만듭니다. 이 메뉴는 스크롤 할 때보기가 멀어지고 스크롤 할 때 반투명 효과로 다시 볼 수 있도록 설계되었습니다.

이 프로세스에는 기본 HTML 구조를 설정하고 주 요소에 스타일을 적용한 다음 메뉴를 애니메이션하는 것이 포함됩니다. 이벤트 핸들러를 스크롤 이벤트에 연결하고 CSS 변환을 사용하여 스크롤 방향에 따라 메뉴의 위치와 모양을 조정하여 애니메이션이 트리거됩니다.

이 사용자 정의 솔루션은 더 많은 설계 유연성을 제공하며 특정 요구에 따라 쉽게 사용자 정의 할 수 있습니다. 최종 결과는 사용자 경험을 향상시키는 역동적 인 대화식 내비게이션 메뉴입니다.
웹 내비게이션 메뉴의 설계는 메뉴 위치, 스타일 및 반응 형 디자인과 같은 많은 요소를 고려해야합니다. 당신은 또한 약간의 애니메이션 효과를 추가 할 수도 있습니다 (물론). 이 시점에서 jQuery 플러그인을 사용하여 대부분의 작업을 수행하는 경향이 있습니다. 그러나 실제로는 필요하지 않습니다! 자신만의 솔루션을 쉽게 만들려면 몇 줄의 코드 만 필요합니다.
• 이 기사에서는 Pure JavaScript, CSS 및 HTML을 사용하여 애니메이션 스티커 내비게이션 메뉴를 만드는 방법을 보여줍니다. 페이지 아래로 스크롤 할 때 최종 제품이 스 와이프하고 위로 스크롤 할 때 다시보기 (세련된 반투명 효과). 이 기술은 중간 및 해커 정오와 같은 잘 알려진 웹 사이트에서 사용됩니다.
읽기 후에는이 기술을 디자인에 사용할 수있어 좋은 결과를 얻을 수 있습니다. 긴급한 독자가 참조 할 수있는 기사의 끝에 데모가 있습니다.
• 스티커 내비게이션 메뉴 : 기본 HTML 구조
다음은 우리가 사용할 기본 HTML 코드 프레임 워크입니다. 여기에는 흥미로운 것이 없습니다.

스타일을 적용하십시오 주요 요소에 몇 가지 스타일을 추가합시다.

메인 컨테이너

우리는 고유 한 브라우저 스타일을 제거하고 컨테이너의 너비를 100%로 설정해야합니다.

배너 컨테이너 이것은 내비게이션 메뉴의 래퍼입니다. 페이지를 수직으로 스크롤하면서 탐색 메뉴를 숨기거나 표시하는 것은 항상 끈적 끈적하고 슬라이드입니다. 컨텐츠 위에 나타나도록 z-index 값을 제공합니다.

배너 섹션 여기에는 내비게이션 메뉴가 포함되어 있습니다. 페이지가 위 또는 아래로 스크롤하면 CSS 전환 속성에 의해 위치와 배경색의 변화가 애니메이션됩니다.

컨텐츠 부품 이 섹션에는 배경 이미지와 텍스트가 포함됩니다. 이 기사의 뒷부분 에서이 페이지에 시차 효과를 추가 할 것입니다.

<div class="container">
  <div class="banner-wrapper">
    <div class="banner">
      <div class="top">

      </div>
      <div class="nav">

      </div>
    </div>
  </div>

  <div class="content">

  </div>
</div>

메뉴 애니메이션

먼저, 사용자가 스크롤 할 때 그에 따라 메뉴를 표시하고 숨길 수 있도록 이벤트 핸들러를 스크롤 이벤트에 첨부해야합니다. 또한 같은 페이지에서 실행되는 다른 코드와의 충돌을 피하기 위해 모든 것을 하나의 iife에 넣었습니다.

<div class="container">
  <div class="banner-wrapper">
    <div class="banner">
      <div class="top">

      </div>
      <div class="nav">

      </div>
    </div>
  </div>

  <div class="content">

  </div>
</div>

일부 초기 값을 설정

우리는 사용자가 스크롤하는 거리를 표시하기 위해 선정 변수를 사용합니다. 페이지가로드되면 0으로 초기화됩니다. 우리는 배너 하일 변수를 사용하여 메뉴의 높이를 저장하고 및

스크롤 방향을 만듭니다 .banner-wrapper 다음으로, 우리는 스크롤 방향을 결정하여 그에 따라 메뉴를 표시하거나 숨길 수 있도록해야합니다. .banner 우리는 NewOffset이라는 변수로 시작합니다. 페이지가로드되면

- 값으로 설정됩니다 - 문서가 현재 수직으로 스크롤되는 픽셀 수 (처음에는 0). 사용자가 스크롤하면 NewOffSet이 그에 따라 증가하거나 감소합니다. BannerHeight에 저장된 값보다 크면 메뉴가 보이지 않았다는 것을 알고 있습니다.

*{
  box-sizing:border-box;
  padding: 0;
  margin: 0;
}

.container{
  width: 100%;
}

아래로 스크롤하면 NewOffSet이 누적보다 크게 만들어지고 탐색 메뉴가 미끄러 져 사라져야합니다. 스크롤 업을 사용하면 새로운 오프셋이 누적보다 작게 만들어지며 탐색 메뉴는 반투명 효과로 다시 볼 수 있습니다. 이 비교 후, 우리는 사용자가 스크롤하는 거리를 추적하기 위해 NewOffset의 값으로 선방자를 업데이트해야합니다.

메뉴 애니메이션

마지막으로, 메뉴를 보여주고 숨기려면 애니메이션을 추가합시다. 다음 CSS를 사용하여이를 달성 할 수 있습니다.

우리는 또한 페이지 상단에 도달하면 반투명 효과가 메뉴에서 제거되도록해야합니다. window.scrollY

보시다시피, 우리는 그에 따라 다른 CSS 클래스를 제거/적용하고 있습니다.

.banner-wrapper {
  z-index: 4;
  transition: all 300ms ease-in-out;
  position: fixed;
  width: 100%;
}

데모

이것은 작업 메뉴의 데모입니다. (외부 웹 사이트에 액세스 할 수 없으므로 Codepen Demo 링크에 삽입해야합니다. 실제 링크는 제공 될 수 없습니다)

결론

.banner {
  height: 77px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  background: rgba(162, 197, 35, 1);
  transition: all 300ms ease-in-out;
}

이 기사에서는 애니메이션 내비게이션 메뉴를 설계하기 위해 Pure JavaScript (jQuery 필요 없음)를 사용하여 몇 줄의 코드를 작성하는 방법에 대해 설명합니다. 아래로 스크롤하면 메뉴가 미끄러 져 스크롤하면 메뉴가 다시 밀려 나옵니다. 이는 수직 스크롤 방향을 모니터링하고 필요할 때 CSS 변환을 DOM 요소에 적용하여 수행됩니다. 이 맞춤형 솔루션은 귀하의 요구와 사양에 따라 쉽고 유연하게 디자인 할 수있는 더 많은 자유를 제공합니다. JavaScript 기술을 향상시키고 싶습니까? JavaScript 및 JavaScript : Next로 시작하는 코스를 확인하십시오.

이 기사는 Vildan Softic이 동료 검토했습니다. Sitepoint 컨텐츠를 최대한 활용 한 Sitepoint의 모든 동료 검토 자에게 감사합니다!

.content {
  background: url(https://unsplash.it/1400/1400?image=699) center no-repeat;
  background-size: cover;
  padding-top: 100%;
}

(JavaScript 애니메이션의 FAQ 섹션은 여기에 포함되어야하며 컨텐츠는 입력 텍스트와 일치합니다. 공간 제한으로 인해 여기에서 생략됩니다.)

위 내용은 바닐라 JavaScript : 애니메이션 스티커 내비게이션 메뉴 작성의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!