[html] HTML5 애니메이션 효과

26 Dec 2023

html

HTML5은 다양한 애니메이션 효과를 구현하는 데 매우 강력한 기능을 제공합니다. 이 기능들은 웹 페이지에 동적이고 멋진 시각적 효과를 만드는 데 도움이 됩니다. 이제 HTML5를 사용하여 다양한 애니메이션 효과를 만드는 방법을 살펴보겠습니다.

내비게이션 및 내용 슬라이드

<nav> 요소와 <section> 요소를 사용하여 내비게이션 및 내용 슬라이드를 만들 수 있습니다. 각 섹션에는 다른 내용이 들어가며 사용자가 내비게이션을 클릭하면 해당 내용이 슬라이드됩니다.

<nav>
  <a href="#section1">섹션 1</a>
  <a href="#section2">섹션 2</a>
  <a href="#section3">섹션 3</a>
</nav>

<section id="section1">
  <h2>섹션 1</h2>
  <p>내용 1</p>
</section>

<section id="section2">
  <h2>섹션 2</h2>
  <p>내용 2</p>
</section>

<section id="section3">
  <h2>섹션 3</h2>
  <p>내용 3</p>
</section>

CSS3 트랜지션 및 애니메이션

CSS3를 사용하여 트랜지션과 애니메이션을 쉽게 추가할 수 있습니다. 이를 통해 요소의 상태 변화에 따른 부드러운 애니메이션 효과를 만들 수 있습니다.

<style>
  .box {
    width: 100px;
    height: 100px;
    background: red;
    transition: width 1s, height 1s;
  }

  .box:hover {
    width: 200px;
    height: 200px;
  }

  @keyframes slidein {
    from {
      margin-left: 100%;
      width: 300%;
    }

    to {
      margin-left: 0%;
      width: 100%;
    }
  }

  .sliding {
    animation: slidein 3s;
  }
</style>

<div class="box"></div>

<div class="sliding"></div>

Canvas 애니메이션

HTML5의 <canvas> 요소를 사용하여 복잡한 애니메이션을 만들 수 있습니다. 이를통해 그래픽 요소에 대한 세부적인 제어가 가능합니다.

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000;"></canvas>

<script>
  var canvas = document.getElementById('myCanvas');
  var ctx = canvas.getContext('2d');
  ctx.fillStyle = 'green';
  ctx.fillRect(10, 10, 150, 80);

  var posX = 10;
  function moveRect() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.fillRect(posX, 10, 150, 80);
    posX += 1;
  }

  setInterval(moveRect, 30);
</script>

이제 HTML5의 다양한 기능을 활용하여 멋진 애니메이션 효과를 웹 페이지에 추가해 보세요!

참고 문헌: