자바스크립트로 어두워지는 애니메이션 구현하기

18 Oct 2023

javascript

소개

이번 튜토리얼에서는 자바스크립트를 사용하여 웹 페이지에 어두워지는 애니메이션을 구현하는 방법에 대해 알아보겠습니다. 이 기술을 사용하면 페이지에 집중을 높이고 효과적인 시각적 효과를 제공할 수 있습니다.

준비물

이 튜토리얼을 따라하기 위해서는 다음과 같은 준비물이 필요합니다.

웹 브라우저
텍스트 편집기

구현 단계

1. HTML 파일 생성

먼저, 텍스트 편집기에서 HTML 파일을 생성합니다. 아래의 코드를 복사하여 HTML 파일에 붙여넣기 합니다.

<!DOCTYPE html>
<html>
<head>
    <title>어두워지는 애니메이션</title>
    <style>
        body {
            background-color: #fff; /* 초기 배경색 */
            transition: background-color 1s; /* 배경색 변경 애니메이션 */
        }
    </style>
</head>
<body>
    <h1>어두워지는 애니메이션</h1>
    <button onclick="makeDarker()">어두워져라!</button>

    <script>
        function makeDarker() {
            document.body.style.backgroundColor = "#000"; /* 검정색 배경으로 변경 */
        }
    </script>
</body>
</html>

2. 스타일 설정하기

HTML 파일에서 스타일을 설정합니다. 위 코드에서는 body 요소에 대한 초기 배경색을 설정하고, 배경색 변경 애니메이션을 지정하였습니다.

3. 자바스크립트 함수 추가하기

makeDarker라는 자바스크립트 함수를 추가합니다. 이 함수는 버튼을 클릭할 때 호출되며, 배경색을 검정색으로 변경합니다.

4. 웹 페이지 실행하기

저장한 HTML 파일을 웹 브라우저에서 열어서 실행합니다. 페이지가 로드되면 “어두워져라!”라는 버튼이 나타납니다. 버튼을 클릭하면 배경색이 검정색으로 변경되는 애니메이션이 재생됩니다.

마무리

이번 튜토리얼에서는 자바스크립트를 사용하여 어두워지는 애니메이션을 구현하는 방법을 알아보았습니다. 이를 응용하여 웹 페이지에 다양한 시각적 효과를 구현할 수 있습니다. 직접 코드를 수정하거나 추가 기능을 구현해 보세요!

참고 자료

MDN JavaScript Guide