이번에는 자바스크립트를 사용하여 파도 효과를 가진 로딩 애니메이션을 만들어 볼 것입니다. 이 애니메이션은 웹사이트나 앱의 로딩 상태를 시각적으로 표현하여 사용자에게 진행 중임을 알려주는 역할을 합니다.
HTML 구조 설정
먼저, HTML 파일 내에 로딩 애니메이션을 담을 요소를 만들어 주어야 합니다. 예시 코드를 살펴보겠습니다:
<div class="loading-container">
<div class="wave"></div>
</div>
위 코드에서는 loading-container라는 클래스를 가지는 부모 요소와 그 안에 파도를 나타내는 wave라는 클래스를 가진 자식 요소를 생성합니다.
CSS 스타일링
다음으로 CSS를 사용하여 파도 애니메이션을 스타일링 해보겠습니다. 예시 코드를 살펴보세요:
.loading-container {
width: 100px;
height: 100px;
position: relative;
}
.wave {
width: 100%;
height: 10px;
position: absolute;
bottom: 0;
background-color: #3366ff;
animation: wave-animation 1.5s infinite;
}
@keyframes wave-animation {
0% {
transform: scaleY(1);
}
50% {
transform: scaleY(0.8);
}
100% {
transform: scaleY(1);
}
}
위 코드에서는 .loading-container 클래스에 원하는 크기와 위치값을 적용하고, .wave 클래스에 파도 애니메이션의 스타일을 설정합니다. @keyframes를 사용하여 파도 애니메이션의 움직임을 정의합니다.
자바스크립트 추가
마지막으로, 자바스크립트를 사용하여 로딩 애니메이션을 동적으로 컨트롤합니다. 예시 코드를 확인하세요:
const waveElement = document.querySelector('.wave');
setInterval(() => {
waveElement.style.height = Math.floor(Math.random() * 20 + 10) + 'px';
}, 1500);
위 코드에서는 setInterval 함수를 사용하여 일정한 시간 간격마다 .wave 요소의 높이를 랜덤하게 변경합니다. 이를 통해 파도 효과를 시각적으로 표현할 수 있습니다.
코드 실행하기
위의 코드를 복사하여 텍스트 파일에 붙여넣고 확장자를 .html로 저장한 후 웹 브라우저에서 실행해보세요. 파도 효과를 가진 로딩 애니메이션을 볼 수 있을 것입니다.
결론
이렇게 자바스크립트를 사용하여 파도 효과를 가진 로딩 애니메이션을 만들 수 있습니다. 이 애니메이션은 사용자에게 로딩 상태를 시각적으로 알려주어 웹사이트나 앱의 사용성을 향상시킬 수 있습니다.