파도 효과는 웹 페이지나 애플리케이션에서 화면에 일어나는 효과 중 하나로, 주로 배경이나 요소에 일정한 주기로 파도처럼 움직이는 모션을 표현할 때 사용됩니다. 이번 블로그 포스트에서는 자바스크립트를 활용하여 파도 효과에 대한 사용자 설정 옵션을 동적으로 조절하는 방법에 대해 알아보겠습니다.
사용자 설정 옵션을 입력 받기
먼저, 사용자로부터 파도 효과에 대한 설정 옵션을 입력 받는 부분을 구현해야 합니다. 이를 위해 HTML에서 입력 폼을 생성하고, 자바스크립트로 사용자가 입력한 값을 가져오는 방법을 사용합니다.
HTML 코드:
<label for="wave-speed">파도 속도:</label>
<input type="range" id="wave-speed" min="1" max="5" step="0.5">
<label for="wave-amplitude">파도 진폭:</label>
<input type="range" id="wave-amplitude" min="10" max="50" step="5">
<button id="apply-button">적용하기</button>
위 코드에서는 패도 속도와 진폭을 조절할 수 있는 range 타입의 입력 필드와 적용하기 버튼이 있습니다. 사용자는 이 입력 필드를 조절하여 원하는 파도 효과를 설정할 수 있습니다.
자바스크립트로 설정 옵션을 동적 조절하기
이제 사용자로부터 입력 받은 설정 옵션을 자바스크립트로 동적으로 조절하는 부분을 구현해보겠습니다.
const speedInput = document.getElementById("wave-speed");
const amplitudeInput = document.getElementById("wave-amplitude");
const applyButton = document.getElementById("apply-button");
applyButton.addEventListener("click", applySettings);
function applySettings() {
const speed = speedInput.value;
const amplitude = amplitudeInput.value;
// 파도 효과에 설정 옵션을 적용하는 코드 작성
}
위 코드에서는 주어진 ID를 가진 HTML 요소들을 getElementById 메소드를 사용해 변수에 저장합니다. 그리고 적용하기 버튼에 click 이벤트에 대한 리스너를 등록합니다. 이 리스너는 applySettings 함수를 호출합니다.
applySettings 함수에서는 사용자가 입력한 설정 옵션을 변수에 저장합니다. 이제 여기에 실제로 파도 효과에 설정 옵션을 적용하는 코드를 작성하면 됩니다.
파도 효과에 설정 옵션 적용하기
파도 효과에 설정 옵션을 적용하기 위해서는 실제 파도 효과를 담당하는 코드가 필요합니다. 여기서는 anime.js 라이브러리를 사용하여 파도 효과를 구현합니다. 먼저 anime.js를 HTML 파일에 추가해야 합니다.
<script src="https://cdn.jsdelivr.net/npm/animejs@3.2.1/anime.min.js"></script>
이어서, applySettings 함수에서 파도 효과에 설정 옵션을 적용하는 코드를 작성해보겠습니다.
function applySettings() {
const speed = speedInput.value;
const amplitude = amplitudeInput.value;
// 파도 효과의 설정 옵션을 적용하기 위한 코드
anime({
targets: ".wave",
translateX: [
{
value: amplitude,
duration: speed * 1000,
easing: "easeInOutQuad",
},
],
loop: true,
});
}
위 코드에서는 anime.js의 anime 함수를 사용하여 .wave 클래스를 가진 요소에 대해 파도 효과를 적용합니다. translateX 속성을 사용해 X축으로 이동시키는 애니메이션을 생성하고, amplitude 변수를 사용하여 진폭을 설정합니다. duration 속성에 speed 변수를 사용하여 속도를 설정하며, easing 속성은 애니메이션의 변화를 부드럽게 조절하는 함수를 지정합니다.
마지막으로, loop 속성을 true로 설정하여 애니메이션이 반복되도록 합니다.
예제 코드
위에서 설명한 내용을 종합하여 작성한 예제 코드는 다음과 같습니다.
<label for="wave-speed">파도 속도:</label>
<input type="range" id="wave-speed" min="1" max="5" step="0.5">
<label for="wave-amplitude">파도 진폭:</label>
<input type="range" id="wave-amplitude" min="10" max="50" step="5">
<button id="apply-button">적용하기</button>
<script src="https://cdn.jsdelivr.net/npm/animejs@3.2.1/anime.min.js"></script>
<script>
const speedInput = document.getElementById("wave-speed");
const amplitudeInput = document.getElementById("wave-amplitude");
const applyButton = document.getElementById("apply-button");
applyButton.addEventListener("click", applySettings);
function applySettings() {
const speed = speedInput.value;
const amplitude = amplitudeInput.value;
anime({
targets: ".wave",
translateX: [
{
value: amplitude,
duration: speed * 1000,
easing: "easeInOutQuad",
},
],
loop: true,
});
}
</script>
이제 웹 페이지에서 파도 속도와 파도 진폭을 조절하고 적용하기 버튼을 클릭하면 입력한 설정에 따라 파도 효과가 동적으로 변경되는 것을 확인할 수 있습니다.