jquery 회전 탐색 버튼

모바일 장치와 반응형 웹 디자인의 인기로 인해 더 많은 웹사이트가 사용자 경험을 향상하기 위해 회전식 탐색 버튼을 채택하기 시작했습니다. 기존 탐색 메뉴에 비해 이러한 종류의 탐색 버튼은 더 간단하고 조작하기 쉬우며 다양한 장치 크기에 더 잘 적응할 수 있습니다.

이 기사에서는 jQuery를 사용하여 회전 탐색 버튼을 만드는 방법을 살펴보고 일반적으로 사용되는 회전 애니메이션 효과 및 기타 관련 기술을 소개합니다.

1단계: HTML 및 CSS 레이아웃

먼저 HTML 문서에서 회전 탐색 버튼의 기본 구조를 만들어야 합니다.

<div class="rotate-btn">
  <span class="line line1"></span>
  <span class="line line2"></span>
  <span class="line line3"></span>
</div>

여기서 세 개의 탐색 버튼을 나타내는 세 개의 범위 요소가 포함된 div 요소를 만듭니다. 직선. 우리는 CSS 스타일을 사용하여 이러한 요소의 스타일을 지정했습니다.

.rotate-btn {
  display: block;
  cursor: pointer;
  position: relative;
  width: 40px;
  height: 40px;
}

.line {
  display: block;
  position: absolute;
  width: 100%;
  height: 3px;
  background-color: #000;
  transition: transform .3s ease-in-out;
}

.line1 {
  top: 0;
}

.line2 {
  top: 50%;
  transform: translateY(-50%);
}

.line3 {
  bottom: 0;
}

위 CSS 스타일에서는 스핀 탐색 버튼의 너비와 높이를 40px로 설정하고 위치를 상대 위치로 지정했습니다. 동시에 절대 위치 지정을 사용하여 세 개의 선분의 위치와 스타일을 설정합니다. 여기서 주목해야 할 점은 회전 애니메이션 효과를 얻기 위해 변환 속성과 전환 속성을 사용한다는 것입니다.

2단계: jQuery 코드 추가

다음으로 jQuery를 사용하여 대화형 효과를 추가해야 합니다. 먼저 HTML 파일에 jQuery 라이브러리를 추가한 후 다음 코드를 작성합니다.

$(document).ready(function() {
  $('.rotate-btn').click(function() {
    $(this).toggleClass('active');
  });
});

위 코드에서는 문서가 로드된 후 스크립트 코드가 실행되도록 jQuery의 Ready 메소드를 사용합니다. 그런 다음 click 메소드에서 회전 탐색 버튼에 대한 클릭 이벤트를 추가하고, 버튼을 클릭하면ggleClass 메소드를 사용하여 버튼의 활성 클래스를 토글합니다.

3단계: 애니메이션 효과 추가

스핀 탐색 버튼을 더욱 생생하게 만들기 위해 몇 가지 스타일링 및 애니메이션 기술을 사용하여 시각적 효과를 향상할 수 있습니다. 다음은 몇 가지 일반적인 회전 애니메이션 효과입니다.

1. 간단한 뒤집기 효과

.rotate-btn.active .line1 {
  transform: translateY(6px) rotate(-45deg);
}

.rotate-btn.active .line2 {
  opacity: 0;
}

.rotate-btn.active .line3 {
  transform: translateY(-6px) rotate(45deg);
}

이 효과에서는 회전 속성과 이동Y 속성을 사용하여 직선의 뒤집기와 상하 이동을 달성합니다. 동시에 숨겨진 효과를 얻으려면 중간 직선을 투명하게 설정하십시오.

2. 파도 효과

.rotate-btn.active .line1 {
  transform: translateY(6px) rotate(45deg);
}

.rotate-btn.active .line2 {
  transform: rotate(-45deg);
}

.rotate-btn.active .line3 {
  transform: translateY(-6px) rotate(135deg);
}

이 효과에서는 첫 번째 직선과 마지막 직선이 각각 플러스 또는 마이너스 45도씩 회전하도록 설정하고 가운데 직선은 중심을 기준으로 회전합니다.

3. 바운스 효과

.rotate-btn.active .line1 {
  transform: translateY(10px);
}

.rotate-btn.active .line2 {
  transform: scale(0.8);
}

.rotate-btn.active .line3 {
  transform: translateY(-10px);
}

이 효과에서는 가운데 직선을 축소하면서 직선을 수직 방향으로 위아래로 이동하게 만드는 효과입니다.

여기에서는 세 가지 효과만 소개합니다. 실제로 탐색 버튼 회전에 대한 애니메이션 효과에는 여러 가지가 있으며 개발자는 필요에 따라 이를 조정하고 수정할 수 있습니다.

요약

이 기사에서는 회전 탐색 버튼을 만드는 기본 프로세스를 소개하고 jQuery와 CSS를 사용하여 대화형 효과와 애니메이션을 구현하는 방법을 설명했습니다. 나는 이 글을 공부함으로써 당신은 회전 탐색 버튼을 만드는 기본 기술을 익혔고, 이 기능을 자신의 웹 사이트에서 사용하여 사용자 경험과 웹 사이트 미학을 향상시킬 수 있다고 믿습니다.

위 내용은 jquery 회전 탐색 버튼의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!