[javascript] 자바스크립트를 사용하여 파도 효과를 가진 로딩 애니메이션을 만드는 방법
로딩 애니메이션은 웹 페이지에서 데이터를 로드하는 동안 사용자에게 진행 상태를 시각적으로 표시하는데 사용됩니다. 이번에는 자바스크립트를 활용하여 파도 효과를 가진 로딩 애니메이션을 만드는 방법을 알아보겠습니다.
HTML 마크업 작성
먼저 로딩 애니메이션을 적용할 HTML 요소를 생성합니다. 보통 <div> 요소를 사용하여 로딩 애니메이션을 감싸는 틀을 만들어 주는 것이 일반적입니다.
<div id="loading-animation"></div>
CSS 스타일 설정
다음으로 CSS를 사용하여 로딩 애니메이션의 스타일을 설정합니다. 파도 효과를 위해 linear-gradient를 사용하여 배경 이미지를 설정하고, 애니메이션 속도를 조절할 수 있는 키프레임을 정의합니다.
#loading-animation {
width: 100px;
height: 100px;
background-image: linear-gradient(135deg, #00a8ff, #0097e6);
animation: wave 2s infinite;
}
@keyframes wave {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-10px);
}
}
자바스크립트 추가
마지막으로 자바스크립트를 사용하여 로딩 애니메이션을 동적으로 추가해줍니다. DOMContentLoaded 이벤트를 사용하여 페이지가 로딩될 때 애니메이션이 시작되도록 할 수 있습니다. querySelector를 사용하여 애니메이션 요소를 선택하고, classList를 이용하여 해당 요소에 클래스를 추가해줍니다.
document.addEventListener("DOMContentLoaded", function() {
var loadingAnimation = document.querySelector("#loading-animation");
loadingAnimation.classList.add("show");
});
결과 확인
이제 HTML 파일을 웹 브라우저에서 실행하여 로딩 애니메이션의 파도 효과를 확인할 수 있습니다.