오늘은 자바스크립트를 사용하여 파도치는 애니메이션을 만들어보겠습니다. 이러한 애니메이션은 웹 페이지에 움직임과 생동감을 더해주는데 유용합니다.

HTML 구조 설정하기

먼저, HTML 파일에서 애니메이션을 표현할 요소를 만들어야 합니다. 예를 들어, <div> 요소를 사용하여 파도가 이동하는 영역을 만들 수 있습니다. 해당 <div>에는 고정된 크기와 스타일을 지정해야 합니다.

<div id="wave-container"></div>

CSS 스타일 설정하기

다음으로, 애니메이션에 필요한 CSS 스타일을 설정해야합니다. 파도가 움직이는 애니메이션을 구현하기 위해서는 keyframes를 사용해야하며, @keyframes 규칙을 사용하여 애니메이션의 움직임을 지정할 수 있습니다.

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

#wave-container {
    width: 100%;
    height: 200px;
    background-color: lightblue;
    animation: wave-animation 2s linear infinite;
}

애니메이션의 속성인 transform의 translateX 값에 따라 파도가 이동하게 됩니다.

자바스크립트 코드 작성하기

이제 자바스크립트를 사용하여 애니메이션을 시작하도록 코드를 작성해보겠습니다. window.onload 이벤트 핸들러에서 애니메이션의 시작 로직을 작성합니다.

window.onload = function() {
    var waveContainer = document.getElementById("wave-container");
    var animationWidth = waveContainer.offsetWidth;
    
    waveContainer.style.animationDuration = (animationWidth / 100) + "s";
}

window.onload 이벤트 핸들러는 페이지의 모든 컨텐츠가 로드되면 실행됩니다. 여기서는 wave-container 요소의 너비를 기반으로 애니메이션의 지속 시간을 동적으로 설정하고 있습니다.

웹 페이지에 애니메이션 확인하기

작성한 코드를 HTML 파일에 추가하고 웹 브라우저에서 확인해보세요. 파도가 지속적으로 움직이는 애니메이션을 확인할 수 있을 것입니다.

이런식으로 자바스크립트를 이용하여 웹 페이지에 파도치는 애니메이션을 구현할 수 있습니다. 이를 통해 웹 페이지에 동적인 움직임을 추가하여 사용자들에게 더욱 흥미로운 경험을 제공할 수 있습니다.

#javascript #애니메이션