애니메이션 햄버거 메뉴
4579 단어 htmlcssjavascript
소개
애니메이션 탐색 모음은 최종 사용자에게 제공하는 콘텐츠와 관련하여 거의 필수가 되었습니다. 이제 우리 모두가 양쪽 모두에 대해 약간 편견이 있다는 것을 압니다. 그러나 잠시 동안 나와는 무관합니다... 우리는 모두 햄버거 메뉴를 보았습니다. 하나를 클릭하면 전혀 움직이지 않거나 전환 없이 뚱뚱한X으로 빠르게 전환됩니다. 내 말은... 무엇을 주는가!? 여기에 WOW를 추가할 수 있습니까?
우리가 할 수 있는 한 가지 방법을 탐색해 봅시다! 광산을 확인하십시오 at this link . 현재 개발 중인 포트폴리오입니다. 햄버거 메뉴에 애니메이션 효과를 주는 방법을 알려 드리겠습니다.
또한 다음은 따라할 수 있는 CodePen입니다. 그래도 읽으면서 작성하는 것이 좋습니다!
참고: 저는 드롭다운 메뉴 부분을 가르치고 있지 않습니다... 하지만 관심을 표현하는 댓글을 남기면... 해당 기능에 대한 전용 블로그를 작성하는 것을 고려할 것입니다. 😉
시작하기
가장 먼저 할 일은 세 개divs를 만드는 것입니다. 이상적으로는 이것들divs이 navbar 에 들어가길 원하지만 우리는 이 작업을 수행하는 데 집중할 것입니다. index.html 파일이 필요합니다. 원하는 대로 이름을 지정합니다.
다음으로 제공된 템플릿 및 클래스를 사용하여 내부에 divs를 배치합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="menu">
<div class="one active-element"></div>
<div class="two active-element"></div>
<div class="three active-element"></div>
</div>
</body>
</html>
보시다시피, 우리는 처음에 각 div에 one , two , three 클래스로 레이블을 지정했습니다. 이 div는 각각 햄버거 메뉴의 3개 막대 중 하나를 나타냅니다. 이제 스타일을 추가하여 사물을 표시해 보겠습니다.
index.css 파일을 만들고 index.html 파일에 연결합니다. 완료되면 다음 스타일을 적용합니다.
html {
background-color: black;
}
.menu {
display: flex;
flex-direction: column;
align-items: center;
width: 100vw;
}
.one, .two, .three {
width: 45px;
height: 3px;
margin-bottom: 8px;
background-color: aqua;
border-radius: 20px;
box-shadow: 0 0 5px aqua;
}
완벽합니다. 이제 빛나는 햄버거 메뉴가 있는 검은색 배경이 있어야 합니다. 😄 아직 제대로 작동하는 것은 없지만 이제 최소한 모든 것을 볼 수 있습니다. 나만의 색상으로 만들고 싶다면 자유롭게 색상을 가지고 놀아보세요. 여기까지 모든 것이 잘 되었다면 애니메이션 부분으로 넘어갈 수 있습니다.
1 단계:
우리는 사용자들이 햄버거 메뉴를 클릭할 수 있다는 것을 알았으면 합니다! 이를 수행하는 가장 좋은 방법은 커서가 커서를 가리킬 때 변경하는 것입니다. CSS 파일에서 다음과 같은 새 속성 클래스를 적용합니다.
.menu:hover {
cursor: pointer
}
충분히 간단하죠?
2 단계:
다음으로 아직 존재하지 않는 클래스에 대한 몇 가지 CSS 속성을 만들 것입니다 -- .active . 그들은 클릭 이벤트를 추가하면 존재하지만 지금은 ... 이것에 대해 저를 믿으십시오. 나는 실망시키지 않을 것이다!
CSS 파일에 다음을 추가합니다.
.one.active {
transform: translate(0, 14px) rotate(45deg);
}
.two.active {
background-color: transparent;
box-shadow: none;
transform: translateX(-55px);
}
.three.active {
transform: translate(0, -8px) rotate(-45deg);
}
3단계:
이제 우리는 그것을 작동시킬 것입니다! index.js 파일을 만들고 index.html 파일에 연결합니다. 이 특정 애니메이션에는 많은 코드가 필요하지 않습니다. 이것을 다음 index.js에 넣으십시오.
const menu = document.querySelector(".menu");
menu.addEventListener("click", () => {
const activeElements = document.querySelectorAll(".active-element");
for(let i = 0; i < activeElements.length; i++) {
activeElements[i].classList.toggle("active");
}
});
햄버거 메뉴를 클릭해 보세요.
후자, 작동합니다!
문제와 해결책
이것은 불행히도 사람들이 멈출 때입니다. 매우 빠른 애니메이션 전환이 있지만 기본적으로 앞뒤로 전환하는 두 프레임뿐입니다. 유체 애니메이션이 말 그대로 하나의 속성으로 고정되어 있기 때문에 이것은 나에게 가장 실망스럽습니다...
transition: XXXms
이 경우 CSS 파일에서 transition: 300ms를 .one, .two, .three {}에 추가하기만 하면 됩니다.
이 최종 속성 목록은 다음과 같습니다.
.one, .two, .three {
transition: 300ms;
width: 45px;
height: 3px;
margin-bottom: 8px;
background-color: aqua;
border-radius: 20px;
box-shadow: 0 0 5px aqua;
}
그것을 밖으로 테스트! 이것이 얼마나 쉬웠는지 놀랄 것입니다.
결론
실제로 애니메이션은 그렇게 어렵지 않습니다. 이것은 애니메이션이 복잡해질 수 없다는 말은 아니지만, 일부 개발자 지망생이 애니메이션에 나쁜 평판을 주는 것 같습니다. 어떤 경우이든, 이것이 여러분 모두에게 유용하기를 바랍니다. 건배!
Reference
이 문제에 관하여(애니메이션 햄버거 메뉴), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://dev.to/matthewpalmer9/animated-hamburger-menu-20jn
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
가장 먼저 할 일은 세 개
divs를 만드는 것입니다. 이상적으로는 이것들divs이 navbar 에 들어가길 원하지만 우리는 이 작업을 수행하는 데 집중할 것입니다. index.html 파일이 필요합니다. 원하는 대로 이름을 지정합니다.다음으로 제공된 템플릿 및 클래스를 사용하여 내부에
divs를 배치합니다.<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="menu">
<div class="one active-element"></div>
<div class="two active-element"></div>
<div class="three active-element"></div>
</div>
</body>
</html>
보시다시피, 우리는 처음에 각 div에
one , two , three 클래스로 레이블을 지정했습니다. 이 div는 각각 햄버거 메뉴의 3개 막대 중 하나를 나타냅니다. 이제 스타일을 추가하여 사물을 표시해 보겠습니다.index.css 파일을 만들고 index.html 파일에 연결합니다. 완료되면 다음 스타일을 적용합니다.html {
background-color: black;
}
.menu {
display: flex;
flex-direction: column;
align-items: center;
width: 100vw;
}
.one, .two, .three {
width: 45px;
height: 3px;
margin-bottom: 8px;
background-color: aqua;
border-radius: 20px;
box-shadow: 0 0 5px aqua;
}
완벽합니다. 이제 빛나는 햄버거 메뉴가 있는 검은색 배경이 있어야 합니다. 😄 아직 제대로 작동하는 것은 없지만 이제 최소한 모든 것을 볼 수 있습니다. 나만의 색상으로 만들고 싶다면 자유롭게 색상을 가지고 놀아보세요. 여기까지 모든 것이 잘 되었다면 애니메이션 부분으로 넘어갈 수 있습니다.
1 단계:
우리는 사용자들이 햄버거 메뉴를 클릭할 수 있다는 것을 알았으면 합니다! 이를 수행하는 가장 좋은 방법은 커서가 커서를 가리킬 때 변경하는 것입니다. CSS 파일에서 다음과 같은 새 속성 클래스를 적용합니다.
.menu:hover {
cursor: pointer
}
충분히 간단하죠?
2 단계:
다음으로 아직 존재하지 않는 클래스에 대한 몇 가지 CSS 속성을 만들 것입니다 -- .active . 그들은 클릭 이벤트를 추가하면 존재하지만 지금은 ... 이것에 대해 저를 믿으십시오. 나는 실망시키지 않을 것이다!
CSS 파일에 다음을 추가합니다.
.one.active {
transform: translate(0, 14px) rotate(45deg);
}
.two.active {
background-color: transparent;
box-shadow: none;
transform: translateX(-55px);
}
.three.active {
transform: translate(0, -8px) rotate(-45deg);
}
3단계:
이제 우리는 그것을 작동시킬 것입니다! index.js 파일을 만들고 index.html 파일에 연결합니다. 이 특정 애니메이션에는 많은 코드가 필요하지 않습니다. 이것을 다음 index.js에 넣으십시오.
const menu = document.querySelector(".menu");
menu.addEventListener("click", () => {
const activeElements = document.querySelectorAll(".active-element");
for(let i = 0; i < activeElements.length; i++) {
activeElements[i].classList.toggle("active");
}
});
햄버거 메뉴를 클릭해 보세요.
후자, 작동합니다!
문제와 해결책
이것은 불행히도 사람들이 멈출 때입니다. 매우 빠른 애니메이션 전환이 있지만 기본적으로 앞뒤로 전환하는 두 프레임뿐입니다. 유체 애니메이션이 말 그대로 하나의 속성으로 고정되어 있기 때문에 이것은 나에게 가장 실망스럽습니다...
transition: XXXms
이 경우 CSS 파일에서 transition: 300ms를 .one, .two, .three {}에 추가하기만 하면 됩니다.
이 최종 속성 목록은 다음과 같습니다.
.one, .two, .three {
transition: 300ms;
width: 45px;
height: 3px;
margin-bottom: 8px;
background-color: aqua;
border-radius: 20px;
box-shadow: 0 0 5px aqua;
}
그것을 밖으로 테스트! 이것이 얼마나 쉬웠는지 놀랄 것입니다.
결론
실제로 애니메이션은 그렇게 어렵지 않습니다. 이것은 애니메이션이 복잡해질 수 없다는 말은 아니지만, 일부 개발자 지망생이 애니메이션에 나쁜 평판을 주는 것 같습니다. 어떤 경우이든, 이것이 여러분 모두에게 유용하기를 바랍니다. 건배!
Reference
이 문제에 관하여(애니메이션 햄버거 메뉴), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://dev.to/matthewpalmer9/animated-hamburger-menu-20jn
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
.menu:hover {
cursor: pointer
}
다음으로 아직 존재하지 않는 클래스에 대한 몇 가지 CSS 속성을 만들 것입니다 --
.active . 그들은 클릭 이벤트를 추가하면 존재하지만 지금은 ... 이것에 대해 저를 믿으십시오. 나는 실망시키지 않을 것이다!CSS 파일에 다음을 추가합니다.
.one.active {
transform: translate(0, 14px) rotate(45deg);
}
.two.active {
background-color: transparent;
box-shadow: none;
transform: translateX(-55px);
}
.three.active {
transform: translate(0, -8px) rotate(-45deg);
}
3단계:
이제 우리는 그것을 작동시킬 것입니다! index.js 파일을 만들고 index.html 파일에 연결합니다. 이 특정 애니메이션에는 많은 코드가 필요하지 않습니다. 이것을 다음 index.js에 넣으십시오.
const menu = document.querySelector(".menu");
menu.addEventListener("click", () => {
const activeElements = document.querySelectorAll(".active-element");
for(let i = 0; i < activeElements.length; i++) {
activeElements[i].classList.toggle("active");
}
});
햄버거 메뉴를 클릭해 보세요.
후자, 작동합니다!
문제와 해결책
이것은 불행히도 사람들이 멈출 때입니다. 매우 빠른 애니메이션 전환이 있지만 기본적으로 앞뒤로 전환하는 두 프레임뿐입니다. 유체 애니메이션이 말 그대로 하나의 속성으로 고정되어 있기 때문에 이것은 나에게 가장 실망스럽습니다...
transition: XXXms
이 경우 CSS 파일에서 transition: 300ms를 .one, .two, .three {}에 추가하기만 하면 됩니다.
이 최종 속성 목록은 다음과 같습니다.
.one, .two, .three {
transition: 300ms;
width: 45px;
height: 3px;
margin-bottom: 8px;
background-color: aqua;
border-radius: 20px;
box-shadow: 0 0 5px aqua;
}
그것을 밖으로 테스트! 이것이 얼마나 쉬웠는지 놀랄 것입니다.
결론
실제로 애니메이션은 그렇게 어렵지 않습니다. 이것은 애니메이션이 복잡해질 수 없다는 말은 아니지만, 일부 개발자 지망생이 애니메이션에 나쁜 평판을 주는 것 같습니다. 어떤 경우이든, 이것이 여러분 모두에게 유용하기를 바랍니다. 건배!
Reference
이 문제에 관하여(애니메이션 햄버거 메뉴), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://dev.to/matthewpalmer9/animated-hamburger-menu-20jn
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
const menu = document.querySelector(".menu");
menu.addEventListener("click", () => {
const activeElements = document.querySelectorAll(".active-element");
for(let i = 0; i < activeElements.length; i++) {
activeElements[i].classList.toggle("active");
}
});
이것은 불행히도 사람들이 멈출 때입니다. 매우 빠른 애니메이션 전환이 있지만 기본적으로 앞뒤로 전환하는 두 프레임뿐입니다. 유체 애니메이션이 말 그대로 하나의 속성으로 고정되어 있기 때문에 이것은 나에게 가장 실망스럽습니다...
transition: XXXms이 경우 CSS 파일에서
transition: 300ms를 .one, .two, .three {}에 추가하기만 하면 됩니다.이 최종 속성 목록은 다음과 같습니다.
.one, .two, .three {
transition: 300ms;
width: 45px;
height: 3px;
margin-bottom: 8px;
background-color: aqua;
border-radius: 20px;
box-shadow: 0 0 5px aqua;
}
그것을 밖으로 테스트! 이것이 얼마나 쉬웠는지 놀랄 것입니다.
결론
실제로 애니메이션은 그렇게 어렵지 않습니다. 이것은 애니메이션이 복잡해질 수 없다는 말은 아니지만, 일부 개발자 지망생이 애니메이션에 나쁜 평판을 주는 것 같습니다. 어떤 경우이든, 이것이 여러분 모두에게 유용하기를 바랍니다. 건배!
Reference
이 문제에 관하여(애니메이션 햄버거 메뉴), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://dev.to/matthewpalmer9/animated-hamburger-menu-20jn
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
Reference
이 문제에 관하여(애니메이션 햄버거 메뉴), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/matthewpalmer9/animated-hamburger-menu-20jn텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
