[javascript] 자바스크립트를 사용하여 파도 효과를 주는 반응형 웹 페이지 만들기

01 Dec 2023

javascript

파도 효과는 웹 페이지에 동적이고 위트있는 요소를 추가해주는데 사용될 수 있습니다. 이번 튜토리얼에서는 자바스크립트를 사용하여 파도 효과를 주는 반응형 웹 페이지를 만드는 방법을 알아보겠습니다.

1. HTML 구조 설정하기

먼저, 페이지의 기본 구조를 설정하기 위해 HTML을 작성해야 합니다. 다음의 코드를 사용하여 기본적인 HTML 구조를 생성합니다.

<!DOCTYPE html>
<html>
<head>
    <title>파도 효과 웹 페이지</title>
    <link rel="stylesheet" href="styles.css"> <!-- CSS 파일 링크 -->
</head>
<body>
    <div class="wave-container">
        <div class="wave"></div>
    </div>

    <script src="script.js"></script> <!-- 자바스크립트 파일 링크 -->
</body>
</html>

2. CSS 스타일링 추가하기

파도 효과를 만들기 위해 CSS를 사용하여 요소들을 스타일링해야 합니다. 다음의 코드를 사용하여 CSS 파일 styles.css를 생성하고 파도 효과에 필요한 스타일을 추가합니다.

.wave-container {
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

.wave {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("wave.png"); /* 파도 이미지 파일 링크 */
    animation: waveAnimation 10s linear infinite;
    z-index: -1;
}

@keyframes waveAnimation {
    0% {
        background-position-x: 0;
        background-position-y: 100vh;
    }
    100% {
        background-position-x: 100vw;
        background-position-y: 0;
    }
}

3. 자바스크립트 애니메이션 추가하기

이제 파도 효과를 지정된 요소에 주기 위해 자바스크립트를 사용하여 애니메이션을 추가해야 합니다. 다음의 코드를 사용하여 자바스크립트 파일 script.js를 생성하고 애니메이션을 추가합니다.

// 파도 요소 선택
const waveElement = document.querySelector(".wave");

// 윈도우 크기에 따라 파도 애니메이션 스피드 조정
function calculateAnimationSpeed() {
    const waveWidth = waveElement.offsetWidth;
    const wavesPerScreen = Math.ceil(window.innerWidth / waveWidth);
    const animationSpeed = wavesPerScreen * 10; // 한 번의 애니메이션을 완료하는 데 걸리는 시간(초)
  
    waveElement.style.animationDuration = `${animationSpeed}s`;
}

// 윈도우 크기 변경 시 파도 애니메이션 재조정
window.addEventListener("resize", calculateAnimationSpeed);

// 초기 애니메이션 스피드 계산 및 적용
calculateAnimationSpeed();

마치며

이렇게 자바스크립트를 사용하여 파도 효과를 주는 반응형 웹 페이지를 만들 수 있습니다. HTML 구조와 CSS 스타일링, 그리고 자바스크립트 애니메이션을 조합하여 동적이고 흥미로운 웹 페이지를 만들어보세요.

참고 자료: