이번 포스트에서는 자바스크립트를 사용하여 노을이 피는 애니메이션을 만들어 보겠습니다. 이 애니메이션은 웹 페이지에 노을이 점점 나타나고 해가 질 때까지 색상이 변화하는 효과를 주는 것입니다. 이를 통해 웹 페이지에 현실적인 분위기를 더할 수 있습니다.

HTML 구조 설정하기

먼저, HTML 파일에서 애니메이션을 표시할 요소를 생성하겠습니다. 이 예제에서는 div 요소에 sun이라는 id를 부여하겠습니다.

<div id="sun"></div>

CSS 스타일 설정하기

애니메이션 효과를 주기 위해 CSS 파일에 스타일을 추가합니다. 아래 코드와 같이 sun 클래스를 사용하여 원 모양의 동그라미가 생성되도록 설정하겠습니다.

#sun {
  width: 100px;
  height: 100px;
  background-color: orange;
  border-radius: 50%;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity 2s, background-color 2s;
}

위 코드에서는 #sun 요소의 초기 설정으로 opacity 값을 0으로 설정하여 처음에는 보이지 않도록 합니다. 그리고 transition 속성을 사용하여 애니메이션의 지속 시간을 2초로 설정합니다.

JavaScript로 애니메이션 제어하기

이제 자바스크립트를 사용하여 애니메이션을 제어하는 함수를 작성하겠습니다. 해당 함수는 sun 요소의 색상과 투명도를 점차 변경시켜 애니메이션 효과를 주는 역할을 합니다.

const sunElement = document.getElementById('sun');

function animateSun() {
  let opacity = 0;
  let color = 255;

  const intervalId = setInterval(() => {
    opacity += 0.1;
    color -= 25;

    sunElement.style.opacity = opacity;
    sunElement.style.backgroundColor = `rgb(${color}, ${color}, 0)`;

    if (opacity >= 1) {
      clearInterval(intervalId);
    }
  }, 200);
}

animateSun();

위 코드에서는 animateSun 함수가 호출되면 setInterval 메소드를 사용하여 0.2초마다 opacity와 background-color 값을 변경합니다. 이를 통해 점차적으로 노을의 색상과 투명도를 변경시킬 수 있습니다. opacity 값이 1에 도달하면 setInterval을 정지시키고 애니메이션이 완료됩니다.

결과 확인하기

웹 페이지에서 애니메이션을 확인하려면 HTML 파일을 웹 브라우저로 열어보세요. div 요소에 설정한 스타일과 자바스크립트 코드에 의해 sun 요소가 점차적으로 나타나고 색상이 변화하는 애니메이션을 볼 수 있습니다.

이번 포스트에서는 자바스크립트를 사용하여 노을이 피는 애니메이션을 만들어 보았습니다. 이를 응용하여 다양한 애니메이션 효과를 구현할 수 있으며, 웹 페이지에 독특한 분위기를 더할 수 있습니다.

해시태그: #자바스크립트 #애니메이션