HTML, CSS 및 JS를 사용한 고무줄 애니메이션
9555 단어 webdevcodenewbietutorialcss
그리고 애니메이션의 가장 멋진 점은 평범한 오래된 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");
}
여기에서 코드로 직접 플레이할 수 있습니다.
이 튜토리얼을 즐기셨기를 바랍니다!! 댓글로 여러분의 생각을 알려주세요...
Reference
이 문제에 관하여(HTML, CSS 및 JS를 사용한 고무줄 애니메이션), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/thevinitgupta/rubber-band-animation-using-html-css-and-js-6lk텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)