[javascript] 자바스크립트로 파도 효과 주는 방법

01 Dec 2023

javascript

파도 효과는 웹 디자인에서 많이 사용되는 효과 중 하나로, 물결이 일어나는 듯한 시각적 효과를 만들어줍니다. 이번 포스트에서는 자바스크립트를 사용하여 파도 효과를 주는 방법을 알아보겠습니다.

CSS 키프레임 애니메이션 사용하기

파도 효과를 만들기 위해서는 CSS 키프레임 애니메이션을 사용할 수 있습니다. 다음은 이를 구현하는 예시 코드입니다.

<!DOCTYPE html>
<html>
<head>
<style>
@keyframes wave {
    0% { transform: translateY(0); }
    50% { transform: translateY(-15px); }
    100% { transform: translateY(0); }
}

.wave-effect {
    animation: wave 2s linear infinite;
}
</style>
</head>
<body>

<div class="wave-effect">
    <h1>파도 효과</h1>
</div>

</body>
</html>

위 코드는 wave라는 이름의 키프레임을 정의하고, wave-effect 클래스를 가진 요소에 이 키프레임을 적용하여 파도 효과를 주게 됩니다.

JavaScript 사용하기

또 다른 방법으로는 자바스크립트를 사용하여 파도 효과를 주는 방법이 있습니다. 다음은 이를 구현하는 예시 코드입니다.

<!DOCTYPE html>
<html>
<head>
<style>
.wave-effect {
    position: relative;
    overflow: hidden;
}

.wave-effect::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(to top, #ffffff 0%, #ffffff 50%, #f7f7f7 100%);
    opacity: 0.6;
    transform: translateY(100%);
    animation: wave 2s linear infinite;
}

@keyframes wave {
    0% { transform: translateY(100%); }
    50% { transform: translateY(0); }
    100% { transform: translateY(100%); }
}
</style>
</head>
<body>

<div class="wave-effect">
    <h1>파도 효과</h1>
</div>

</body>
</html>

위 코드는 wave-effect 클래스를 가진 요소에 ::after 가상 요소를 추가하여 파도 효과를 구현합니다. wave라는 이름의 키프레임을 정의하고, transform 속성을 사용하여 Y축으로 이동하는 애니메이션 효과를 주게 됩니다.

결론

자바스크립트를 사용하여 파도 효과를 주는 방법은 다양하게 구현할 수 있습니다. 이번 포스트에서는 CSS 키프레임 애니메이션과 자바스크립트를 활용하여 파도 효과를 주는 예시 코드를 제공하였습니다. 추가적으로 여러 가지 다양한 방법들을 찾아보고, 자신에게 맞는 방법을 선택하여 웹 디자인에서 파도 효과를 활용해보세요.