재미있는 자바스크립트 효과들

1. 클릭해서 이미지 숨기기

document.getElementById("hide-image").addEventListener("click", function(){
  document.getElementById("target-image").style.display = "none";
});

위 코드는 ‘hide-image’라는 ID를 가진 HTML 요소를 클릭하면 ‘target-image’라는 ID를 가진 이미지가 숨겨지도록 하는 코드입니다.

2. 텍스트 색상 변경하기

document.getElementById("change-color").addEventListener("mouseenter", function(){
    document.getElementById("text-color").style.color = "#FF0000";
});

document.getElementById("change-color").addEventListener("mouseleave", function(){
    document.getElementById("text-color").style.color = "#000000";
});

위 코드는 ‘change-color’라는 ID를 가진 HTML 요소에 마우스를 가져다 대면 ‘text-color’라는 ID를 가진 텍스트 색상이 빨간색으로 변경되도록 하고, 마우스를 떼면 다시 검은색으로 바뀝니다.

3. 따라다니는 메뉴 만들기

window.onscroll = function() {myFunction()};

var navbar = document.getElementById("navbar");

var sticky = navbar.offsetTop;

function myFunction() {
  if (window.pageYOffset >= sticky) {
    navbar.classList.add("sticky")
  } else {
    navbar.classList.remove("sticky");
  }
}

위 코드는 화면을 스크롤하면서 ‘navbar’라는 ID를 가진 메뉴가 화면 상단에 고정되도록 하는 코드입니다. ‘sticky’라는 클래스를 추가하여 고정합니다.

자바스크립트 재미있는 효과: 자바스크립트를 이용하여 HTML 요소들을 동적으로 조작하면 웹 페이지에 다양하고 재미있는 효과를 줄 수 있습니다. 클릭, 마우스 오버, 스크롤 등 다양한 이벤트를 활용하여 사용자의 편의성과 시각적 효과를 높일 수 있습니다.