CSS의 간단한 마이크로 인터랙티브(Pt1):햄버거 메뉴 아이콘

디자이너든 사용자를 대상으로 하는 개발자든 간에 마이크로 상호작용의 중요성을 알아차렸을 것이다.프로그램의 다른 부분에서 무슨 일이 발생하든지 간에, 하나의 시각이나 용례를 둘러싼 상호작용이 무엇인지 생각해 보자.그래서 나는 진공 속에서 그것들을 관찰하고 그들이 어떻게 일을 하는지, 그리고 자신들이 어떻게 일을 하는지 보는 것이 중요하다고 생각한다.
이것은 마이크로 인터랙티브 시리즈의 첫 편으로 햄버거 메뉴 아이콘을 전면적으로 소개할 것이다. 이것은 인터넷에서 가장 자주 사용하는 요소 중의 하나이다.가장 유행하는 3가지 동작 유형과 CSS에서 이를 복제하는 방법에 대해 설명합니다.일부 JS를 사용하여 클래스만 전환합니다.

스태킹 및 회전

이것은 많은 응용 프로그램과 사이트에서 볼 수 있는 가장 광범위하게 사용되는 상호작용 중 하나입니다. 무슨 일이 일어났는지 분석해 봅시다.

중앙

에 철근 3개 쌓기

쇠막대기 중 하나를 숨긴다

가시 막대 2개를 X

로 회전

닫을 때의 역방향 상호작용

HTML을 준비하는 것부터 시작하겠습니다. 저는 슬림을 사용할 것입니다. 왜냐하면 그것은 더욱 간결하기 때문입니다. 그러나 물론, 당신은 순수한 HTML이나 당신이 좋아하는 프로세서를 사용할 수 있습니다.
우리는 먼저 용기에 세 개의 줄무늬 원소를 그릴 것이다.이것은 우리가 대부분의 예시에 사용할 기초이다.

body
  .hamburger
    .bar
    .bar
    .bar

이제 CSS의 경우 막대 그래프를 축소(기본 아이콘)로 지정하여 바탕을 만듭니다.

.hamburger {
  height: 2.3rem;
  width: 3rem;
  display: inline-block;
  cursor: pointer;
  position: relative;
}
.bar {
  border-bottom: 0.33rem solid white;
  position: absolute;
  display: block;
  width: 100%;
  &:first-of-type {
    top: 0;
  }
  &:nth-of-type(2) {
    top: 1rem;
  }
  &:nth-of-type(3) {
    top: 2rem;
  }
}

CSS 클래스를 전환하여 상호 작용을 수행할 것입니다. 다음은 간단한 JS입니다.

const hamburger = document.querySelector('.hamburger');
hamburger.addEventListener('click', function(){
  hamburger.classList.toggle('opened');
});

이제 애니메이션에 바로 들어갈 준비가 되었습니다. 애니메이션은 두 부분으로 구성되어 있습니다. 그것이 바로 쌓아올리기와 회전입니다.키 프레임을 사용하지 않고transition 속성을 다른 시간에 터치하도록 설정합니다. 쉼표로 구분된 값을 type-of-transition duration delay 로 전달할 수 있습니다.이렇게 .opened .bar에 추가합니다.

transition:
  top 100ms,
  transform 100ms 230ms,
  opacity 100ms;

스타일을 .opened 클래스에 적용할 때가 되었다. 우리는 중간의 줄을 빼고 윗부분과 밑부분의 줄을 이동하고 회전시켜 먼저 선을 형성하고 그 다음에 X를 형성할 것이다.또한 X가 스택 아이콘으로 다시 이동하는 시간에 역변환 타이밍을 적용합니다.

.opened {
  .bar {
    transition:
      top 100ms,
      transform 100ms 230ms,
      opacity 100ms;
    &:first-of-type {
      top: 1em;
      transform: rotate(45deg);
    }
    &:nth-of-type(2) {
      opacity: 0;
    }
    &:nth-of-type(3) {
      top: 1em;
      transform: rotate(-45deg);
    }
  }
}

재미를 더하기 위해 애니메이션에 포착 효과를 더하기 위해 .hamburger .bar와 .opened .bar에 모두 과도 시간 기능이 추가되었습니다.

transition-timing-function: cubic-bezier(1, 0.05, 0.62, 1.78);

최종 결과:

슬라이딩 및 회전

이런 상호작용은 상술한 것과 유사하지만 사람들은 더욱 원시적(또는 효율적이다!)이라고 할 수 있다.모든 애니메이션은 한 단계에서 완성할 수 있습니다.하지만 전체적으로 우리가 무엇을 해야 하는지 봅시다.

중간 막대를 슬라이드하여 불투명도를 낮춘다

X

우리는 이전 예시의 기초부터 직접 스트라이프 원소에 효과를 첨가할 것이다.
우리의 줄의 초기 위치는 같고, 다른 것은 이번에 우리는 transition: all를 추가하여 우리의 코드를 간소화할 것이다. 왜냐하면 이런 다단계 애니메이션이 필요하지 않기 때문이다

.hamburger {
  height: 2.3rem;
  width: 3rem;
  display: inline-block;
  margin: 0 auto;
  cursor: pointer;
  position: relative;

  .bar {
    border-bottom: 0.33rem solid white;
    position: absolute;
    display: block;
    width: 100%;
    transition: all 350ms;
    transition-timing-function: cubic-bezier(1, 0.05, 0.62, 1.78);
    &:first-of-type {
      top: 0;
    }
    &:nth-of-type(2) {
      top: 1rem;
    }
    &:nth-of-type(3) {
      top: 2rem;
    }
  }
}

또한 Dellopened 클래스, 특히 두 번째 요소는 이제 왼쪽으로 슬라이드하여 투명해야 합니다.

.opened {
  .bar {
    &:first-of-type {
      top: 1em;
      transform: rotate(45deg);
    }
    &:nth-of-type(2) {
      opacity: 0;
      transform: translateX(-30px);
    }
    &:nth-of-type(3) {
      top: 1em;
      transform: rotate(-45deg);
    }
  }
}

최종 결과:

경탄

햄버거 버튼을 뒤집는 것은 미리 맞춤형 아이콘을 사용하는 좋은 방법이자 내가 자주 보는 또 다른 것이다.메커니즘은 매우 간단하다. 한쪽에는 햄버거 아이콘이 있고 다른 한쪽에는 닫힌 아이콘이 있는데 클릭(또는 어떤 동작)을 하면 뒤집힌다.
이를 위해서는 먼저 HTML(Slim)을 조정해야 합니다.

body
  .hamburger
    .hamburger-button
      .icon-opened
        .bar
        .bar
        .bar
    .hamburger-button.hamburger-button-back
      .icon-closed
        .bar
        .bar

이것은 두 가지 요소를 만들 것이다. 하나는 우리가 하나의 스트라이프 아이콘으로 설계할 것이고, 다른 하나는 x와 같으며, .hamburger-button를 배경으로 하는 소포와 우리의 스트라이프 내부icon- 요소를 포함할 것이다.네, 이것은 상당히 많은 코드입니다. 그러나 이것은 단지 CSS로 아이콘을 만들고 있기 때문입니다. 만약 당신이 SVG 아이콘을 사용한다면 이것은 훨씬 간단해 보일 것입니다.
이제 외부 요소에 CSS를 추가합니다.

.hamburger {
  margin: 0 auto;

  &-button {
    border-radius: 100px;
    display: inline-block;
    cursor: pointer;
    background: linear-gradient(to right, #485563, #29323c);
    // the padding along with the inner wrap adds up to 6rem*6rem circle
    padding: 1.85rem 1.5rem;
  }
}

이제 아이콘을 추가합니다.어떤 것들은 더 간결한 코드로 조합될 수 있지만, 우리는 여기서 이렇게 하지 않을 것이다. 왜냐하면 나는 일을 가능한 한 쉽게 이해하고 따르게 하고 싶기 때문이다.

  .icon-opened {
    height: 2.3rem;
    width: 3rem;
    position: relative;
    .bar {
      border-bottom: 0.33rem solid white;
      position: absolute;
      display: block;
      width: 100%;
      &:first-of-type {
        top: 0;
      }
      &:nth-of-type(2) {
        top: 1rem;
      }
      &:nth-of-type(3) {
        top: 2rem;
      }
    }
  }
  .icon-closed {
    height: 2.3rem;
    width: 3rem;
    position: relative;
    .bar {
      border-bottom: 0.33rem solid white;
      position: absolute;
      display: block;
      width: 100%;
      &:first-of-type {
        top: 1em;
        transform: rotate(45deg);
      }
      &:nth-of-type(2) {
        top: 1em;
        transform: rotate(-45deg);
      } 
    }
  }

이때 다음과 같이 두 개의 아이콘이 나란히 놓여야 한다.

일단 우리가 여기에 도착하면 애니메이션을 만들 수 있습니다. 자바스크립트 코드는 우리가 사용한 것과 같이 외부 .hamburger 요소에서 클래스를 전환하기만 하면 됩니다.CSS 3D를 사용하여 속성 및 위치를 변환합니다.
우선, 우리는 X 아이콘을 뒤집어 단추의 뒷면에 놓아야 한다.이를 위해, 우리는 절대 포지셔닝 .hamburger-button 원소를 -back 원소에transform 속성을 추가할 것입니다.우리는 또한 backface-visibility: hidden;를 추가할 것이다. 속성 이름은 매우 자명하게 들리지만 원소의 뒷면을 숨긴다. 이것은 보통'뒤집을 수 있는'원소에 적용되어 z 인덱스와 층 고장으로 인한 반짝임을 방지한다.

 &-button {
    border-radius: 100px;
    display: inline-block;
    cursor: pointer;
    background: linear-gradient(to right, #485563, #29323c);
    // the padding along with the inner wrap adds up to 6rem*6rem circle
    padding: 1.85rem 1.5rem;
    position: absolute;
    top: 0;
    left: 0;
    backface-visibility: hidden;
    &-back {
      transform: rotateY(180deg);
    }
  }

또한 중첩된 요소도 3D 공간에서 렌더링되도록 기본.hamburger 요소 및 transform-style: preserve-3d 요소에 미리 정의된 치수 및 변환 속성을 추가합니다.

.hamburger {
  margin: 0 auto;
  width: 6rem;
  height: 6rem;
  transition: all 300ms ease-in;
  transform-style: preserve-3d;
}

지금 유일하게 해야 할 일은 .hamburger류를 추가할 때 전체opened원소를 뒤집는 것이다!
최종 결과:
이 세 개의 마이크로 상호작용은 SVG나 그 어떠한 JS 라이브러리도 필요하지 않고 CSS에서 완전히 완성할 수 있다. 비록 매우 간단하지만, 일부 추가 회전, 과도 시간과 다른 속성을 통해 조정하여 더욱 매끄럽거나 복잡하게 보일 수 있다.만약 네가 인터넷을 둘러본다면 대부분의 햄버거 아이콘이 위의 하나를 상호작용의 기초로 사용한다는 것을 알게 될 것이다. 이것은 당연한 것이다.상술한 방법은 간단한 해결 방안을 제공하는 동시에 관건적인 프레임이나 기이한 라이브러리를 사용할 필요가 없다.너는 복제하기 쉬운 다른 햄버거 아이콘의 상호작용이 있다는 것을 아니?만약 그렇다면, 나도 이런 말을 기꺼이 들을 것이다!