자바스크립트로 꾸미는 재미있는 웹 페이지 효과

1. 캔버스로 그래픽 효과 만들기

<canvas id="myCanvas" width="500" height="500"></canvas>
<script>
  var canvas = document.getElementById('myCanvas');
  var ctx = canvas.getContext('2d');
  // 캔버스를 통해 그래픽을 그릴 수 있는 코드를 작성합니다.
</script>

캔버스 요소를 이용하여 그래픽 효과를 만들 수 있습니다. 자바스크립트의 2D 그래픽 기능을 이용하여 캔버스에 원, 사각형, 선 등 다양한 도형을 그릴 수 있습니다.

2. 호버 효과 추가하기

<style>
  .hover-effect {
    transition: background-color 0.3s;
  }
  .hover-effect:hover {
    background-color: yellow;
  }
</style>
<div class="hover-effect">
  
</div>

호버 효과를 추가하여 마우스를 올리면 요소의 배경 색상이 변경되도록 할 수 있습니다. 이는 주로 메뉴, 버튼 등에 사용되며 사용자와의 상호작용을 증진시킵니다.

3. 스크롤 애니메이션 만들기

<style>
  .scroll-animation {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.5s, transform 0.5s;
  }
  .scroll-animation.active {
    opacity: 1;
    transform: translateY(0);
  }
</style>
<script>
  var elements = document.getElementsByClassName('scroll-animation');
  function checkVisible() {
    for (var i = 0; i < elements.length; i++) {
      var element = elements[i];
      var bounding = element.getBoundingClientRect();
      if (
        bounding.top + element.clientHeight > 0 &&
        bounding.bottom - element.clientHeight < window.innerHeight
      ) {
        element.classList.add('active');
      }
    }
  }
  window.addEventListener('scroll', checkVisible);
</script>

스크롤 애니메이션을 추가하여 페이지에 요소가 나타날 때 효과를 줄 수 있습니다. window 객체의 scroll 이벤트를 감지하여 요소가 화면에 보일 때 해당 요소에 클래스를 추가하여 애니메이션을 적용합니다.

---

이 블로그 포스트에서는 자바스크립트를 활용하여 꾸미는 재미있는 웹 페이지 효과를 다루었습니다. 캔버스를 통해 그래픽을 그리고, 호버 효과를 추가하여 상호작용을 높이고, 스크롤 애니메이션을 만들어 요소를 부드럽게 나타낼 수 있습니다.

키워드: 자바스크립트, 재미있는 효과