모바일 환경에서 많이들 사용하는 햄버거 메뉴는 애니메이션을 많이 넣어서들 사용합니다.
SVG 및 CSS를 사용하여 다양한 효과들을 만들 수 있습니다.
<button class="menu" onclick="this.classList.toggle('opened');this.setAttribute('aria-expanded', this.classList.contains('opened'))" aria-label="Main Menu">
<svg width="100" height="100" viewBox="0 0 100 100">
<path class="line line1" d="M 20,29.000046 H 80.000231 C 80.000231,29.000046 94.498839,28.817352 94.532987,66.711331 94.543142,77.980673 90.966081,81.670246 85.259173,81.668997 79.552261,81.667751 75.000211,74.999942 75.000211,74.999942 L 25.000021,25.000058" />
<path class="line line2" d="M 20,50 H 80" />
<path class="line line3" d="M 20,70.999954 H 80.000231 C 80.000231,70.999954 94.498839,71.182648 94.532987,33.288669 94.543142,22.019327 90.966081,18.329754 85.259173,18.331003 79.552261,18.332249 75.000211,25.000058 75.000211,25.000058 L 25.000021,74.999942" />
</svg>
</button>
우선 SVG를 적절히 그려서 애니메이션을 위한 라인들을 그립니다.
body {
align-items: center;
display: flex;
justify-content: center;
height: 100vh;
margin: 0;
}
.menu {
background-color: transparent;
border: none;
cursor: pointer;
display: flex;
padding: 0;
}
.line {
fill: none;
stroke: black;
stroke-width: 6;
transition: stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1),
stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1);
}
.line1 {
stroke-dasharray: 60 207;
stroke-width: 6;
}
.line2 {
stroke-dasharray: 60 60;
stroke-width: 6;
}
.line3 {
stroke-dasharray: 60 207;
stroke-width: 6;
}
.opened .line1 {
stroke-dasharray: 90 207;
stroke-dashoffset: -134;
stroke-width: 6;
}
.opened .line2 {
stroke-dasharray: 1 60;
stroke-dashoffset: -30;
stroke-width: 6;
}
.opened .line3 {
stroke-dasharray: 90 207;
stroke-dashoffset: -134;
stroke-width: 6;
}
각각의 라인들의 dashArray 및 offset값을 getTotalLength() 함수로 알아내서 커스텀화 합니다.
이런 과정까지 오기까지는 꽤나 자세한 출처의 내용이 필요합니다.
적절히 수정해서 다양한 효과들도 만들 수 있을 것 같아 공유드립니다.
이상입니다.
'CSS' 카테고리의 다른 글
Sass 와 새로운 CSS 기능의 충돌! (0) | 2021.02.12 |
---|---|
CSS Contain 속성에 대하여.. (0) | 2021.02.12 |
스크롤 최상단으로 이동 css vs js (0) | 2021.02.07 |
SVG 라이브러리 (RoughNotation) 선긋기, 하이라이트 (0) | 2021.02.06 |
CSS Cascading 잘하기 (0) | 2021.02.02 |
댓글