HTML, CSS 및 JS를 사용한 고무줄 애니메이션

웹사이트에서 애니메이션을 보면 정말 멋지죠?

그리고 애니메이션의 가장 멋진 점은 평범한 오래된 HTML, CSS, 때로는 약간의 Javascript만 있으면 정말 쉽게 만들 수 있다는 것입니다.

쉽게 재현할 수 있는 재미있는 애니메이션 하나를 보자: 고무줄 편지!!

시작하려면 html로 <div>가 필요합니다.

<div class="bouncy">
  B
</div>

이제 더 나은 가시성을 위해 bouncy div의 스타일을 지정해야 합니다. 아래 스타일을 복사하거나 애니메이션을 적용하려는 자신만의 텍스트 스타일을 지정할 수 있습니다.

html{
  width : 100%;
  height : 100%;
  display : flex;
  justify-content : center;
  align-items : center;
  box-sizing : border-box;
  background-color : #010B14;
  color : #56f045;
  font-family : "Comic Sans", sans-serif;
}
.bouncy {
  font-size : 15rem;
}

여기서 주목해야 할 점은 bouncy 클래스에 애니메이션을 직접 추가하지 않을 것이라는 점입니다.

Quiz : Which rule of coding am I following here? Please answer in the comments below 👇👇

대신 애니메이션 속성이 있는 새 클래스를 추가하여 애니메이션을 생성합니다.

.bouncing {
  animation : rubberband 800ms alternate ease-out;
}

고무줄 애니메이션

애니메이션이 어떻게 수행되는지 모르는 경우 에서 이 훌륭한 기능을 확인할 수 있습니다.

일정 시간이 지난 후 애니메이션이 어떻게 보일지 정의하는 애니메이션용 키프레임을 사용할 것입니다. 우리는 일반적으로 백분율로 이 작업을 수행합니다.
하지만 잠깐만요, 고무줄은 어떻게 생겼나요? 고무줄로 보자...😁😁



이제 고무줄이 어떻게 생겼는지 알았으니 CSS 키프레임과 백분율을 사용하여 고무줄을 만들어 보겠습니다.

@keyframes rubberband {
    0%{
        transform: scaleX(1);
    }
    40%{
        transform: scaleX(1.12) scaleY(0.75);
    }
    55%{
        transform: scaleX(0.85) scaleY(1);
    }
    65%{
        transform: scaleX(1.09) scaleY(0.85);
    }
    75%{
        transform: scaleX(0.9)  scaleY(1);
    }
    90%{
        transform: scaleX(1.05) scaleY(0.95);
    }
    100%{
        transform: scaleX(1) scaleY(1);
    }
}

이것을 고무줄로 생각하지 않는다면 이것을 편집할 수 있습니다. 내 실험 직후에 나는 이것이 충분하다는 것을 알았습니다.

그러나 잠깐, 여전히 작동하지 않습니까?
bouncing 클래스를 직접 추가하면 한 번만 발생합니다.

Javascript를 사용하여 마우스를 가리키면 바운스되는 클래스를 추가해 보겠습니다.

const bouncy = document.querySelector(".bouncy");

bouncy.addEventListener("onmouseover", toggleRubberBand);
function toggleRubberBand(e){
  bouncy.classList.add("bouncing");
  bouncy.classList.remove("bouncing");
}

이렇게 해도 문제가 있습니다.

애니메이션이 없습니다

이는 bouncing 클래스를 제거하기 전에 애니메이션을 완료하지 않기 때문입니다.

이에 대한 두 가지 솔루션이 있습니다.

1. Bouncing 클래스를 제거하지 않음

이렇게 하면 애니메이션이 한 번만 발생합니다. 자, 우리는 그것을 원하지 않습니다, 그렇죠?

Imagine a rubber band that only extends once!!

2. 적당한 때를 기다린다

더 나은 솔루션은 애니메이션이 끝에 도달하면 바운싱 클래스를 제거하는 것입니다.
이것은 간단합니다. animationend 클래스를 제거하려면 bouncing 이벤트를 수신하기만 하면 됩니다. 그 코드는 다음과 같습니다.

const bouncy = document.querySelector(".bouncy");

bouncy.addEventListener("mouseenter", toggleRubberBand);

function toggleRubberBand(e){
  bouncy.classList.add("bouncing");
  bouncy.classList.remove("bouncing");
}

여기에서 코드로 직접 플레이할 수 있습니다.


이 튜토리얼을 즐기셨기를 바랍니다!! 댓글로 여러분의 생각을 알려주세요...