간단한 튜토리얼
jQuery와 CSS3를 사용하여 만든 멋진 햄버거 변형 애니메이션 특수 효과입니다. 이 특수 효과는 jQuery를 통해 버튼 이벤트를 첨부하고 CSS3 변환 및 애니메이션을 통해 애니메이션 효과를 생성합니다.
HTML 구조 사용 방법
햄버거 변형 애니메이션 효과의 HTML 구조는 다음과 같습니다.
<div class='container'> <div class='burger'> <div class='burger__line-top'></div> <div class='burger__line-mid'></div> <div class='burger__menu'> <p>MENU</p> </div> </div> </div>
CSS 스타일
햄버거 메뉴 버튼 기본 스타일은 다음과 같습니다.
.burger { position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; width: 71px; height: 71px; cursor: pointer; } .burger__line-top { width: 100%; height: 8px; border-radius: 5px; background-color: #fff; box-shadow: 0 0 1px 0 #fff; } .burger__line-mid { margin-top: 17px; width: 100%; height: 8px; border-radius: 5px; background-color: #fff; box-shadow: 0 0 1px 0 #fff; } .burger__menu { margin-top: 10px; } .burger__menu p { text-align: center; font-size: 20px; font-family: 'Open Sans', sans-serif; font-weight: 900; color: #fff; text-shadow: 0 0 1px #fff; letter-spacing: 3px; }
는 activeTop, activeMid, activeMenu, reverseTop, reverseMid 및 reverseMenu의 6가지 스타일 애니메이션을 사용합니다. 햄버거 버튼을 각각 변형하고 초기 상태로 되돌리는 데 사용됩니다.
JavaScript
이 특수 효과는 jQuery 코드를 사용하여 해당 요소에 해당 클래스를 추가 및 제거하고 마우스 클릭 이벤트를 햄버거 버튼에 바인딩합니다.
'use strict'; $(document).ready(function () { var $burger = $('.burger'), $topLine = $('.burger__line-top'), $midLine = $('.burger__line-mid'), $menuLine = $('.burger__menu'), anim = false; var changeClasses = { addActive: function addActive() { for (var i = 0; i <= 2; i++) { $burger.children().eq(i).removeClass('reverseLine' + (i + 1)).addClass('activeLine' + (i + 1)); } }, addReverse: function addReverse() { for (var i = 0; i <= 2; i++) { $burger.children().eq(i).removeClass('activeLine' + (i + 1)).addClass('reverseLine' + (i + 1)); } } }; var timeouts = { initial: function initial(child, Y, rot, scale) { $burger.children().eq(child).css('transform', 'translateY(' + Y + 'px) rotate(' + rot + 'deg) scale(' + scale + ',1)'); }, afterActive: function afterActive() { var _this = this; // ES6 setTimeout(function () { _this.initial(0, 12, 45, 1.40); _this.initial(1, -12, -45, 1.40); _this.initial(2, 35, 0, 1); $burger.children().eq(2).css('opacity', '0'); anim = true; }, 1300); }, beforeReverse: function beforeReverse() { var _this2 = this; setTimeout(function () { for (var i = 0; i <= 2; i++) { _this2.initial(i, 0, 0, 1); } $burger.children().eq(2).css('opacity', '1'); anim = false; }, 1300); } }; $burger.on('click', function () { if (!anim) { changeClasses.addActive(); timeouts.afterActive(); } else if (anim) { changeClasses.addReverse(); timeouts.beforeReverse(); } }); });
위 내용은 jQuery와 CSS3의 멋진 햄버거 변형 애니메이션 특수효과 내용입니다. 더 많은 관련 내용은 PHP 중국어 홈페이지(www.php.cn)를 주목해주세요!