이 포스트에서는 자바스크립트를 사용하여 파도 효과를 가진 로딩 애니메이션을 만드는 방법을 알아보겠습니다. 이 애니메이션은 실제 파도가 주는 움직임을 모방하여 웹사이트의 로딩화면을 보다 동적이고 흥미로워 보이도록 만들 수 있습니다. 준비가 되셨다면, 시작해보겠습니다!

1. HTML 구조 만들기

먼저, 우리는 HTML 구조를 생성해야 합니다. 다음과 같이 <div> 요소를 사용하여 로딩 애니메이션을 감싸고, 그 안에 파도의 움직임을 표현할 하위 <div> 요소를 추가합니다.

<div class="loading-animation">
    <div class="wave"></div>
</div>

2. CSS 스타일 지정하기

이제 CSS를 사용하여 로딩 애니메이션을 스타일링합니다. 각 요소에 대한 스타일을 적용하여 파도 효과를 만듭니다.

.loading-animation {
    width: 200px;
    height: 200px;
    background-color: #f2f2f2;
    position: relative;
    overflow: hidden;
}

.wave {
    width: 100%;
    height: 50px;
    background-color: #007bff;
    position: absolute;
    bottom: -20px;
    left: 0;
    animation: waveAnimation 1.5s infinite linear;
}

@keyframes waveAnimation {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(100%);
    }
}

로딩 애니메이션의 크기, 배경색, 파도의 위치 및 움직임 등을 원하는 대로 수정할 수 있습니다.

3. 자바스크립트로 애니메이션 실행하기

마지막으로 자바스크립트를 사용하여 애니메이션을 실행합니다. window 객체의 load 이벤트를 사용하여 로딩 애니메이션이 페이지가 완전히 로드된 후에 시작되도록 합니다.

window.addEventListener('load', function() {
    var wave = document.querySelector('.wave');
    wave.style.animationPlayState = 'running';
});

위 코드는 페이지가 로드될 때 애니메이션을 실행하는 역할을 합니다.

마치며

이제 여러분은 자바스크립트를 사용하여 파도 효과를 가진 로딩 애니메이션을 만들 수 있게 되었습니다. 이를 웹사이트의 로딩 화면에 적용하면 사용자에게 보다 재미있고 동적인 로딩 경험을 제공할 수 있습니다. 직접 코드를 작성하고 테스트해보세요. 성공적인 프로젝트 되기를 바랍니다!

참고 자료

• CSS 애니메이션 속성
• 자바스크립트 이벤트