신기한 자바스크립트 효과들

자바스크립트는 웹 페이지의 다양한 요소들을 동적으로 조작할 수 있는 강력한 언어입니다. 이번에는 자바스크립트를 사용하여 만들 수 있는 3가지 신기한 효과를 소개해 드리겠습니다.

1. 이미지 슬라이드쇼

let images = ["image1.jpg", "image2.jpg", "image3.jpg"];
let currentImageIndex = 0;

setInterval(function() {
  document.querySelector("img").src = images[currentImageIndex];
  currentImageIndex = (currentImageIndex + 1) % images.length;
}, 3000);

위의 코드는 이미지 슬라이드쇼를 만드는 코드입니다. 배열에 이미지 파일명을 담아두고, 일정 시간마다 배열의 다음 이미지를 보여주는 방식으로 동작합니다.

2. 마우스 감도에 따라 이미지 크기 조절

document.addEventListener("mousemove", function(event) {
  let img = document.querySelector("img");
  let width = event.clientX / window.innerWidth;
  let height = event.clientY / window.innerHeight;
  
  img.style.transform = "scale(" + width + ", " + height + ")";
});

위의 코드는 마우스 감도에 따라 이미지 크기를 조절하는 코드입니다. 마우스의 위치에 따라 이미지의 width와 height를 계산하여 transform 속성에 적용합니다.

3. 랜덤한 색상으로 배경 변경

setInterval(function() {
  let red = Math.floor(Math.random() * 256);
  let green = Math.floor(Math.random() * 256);
  let blue = Math.floor(Math.random() * 256);
  
  document.body.style.backgroundColor = "rgb(" + red + ", " + green + ", " + blue + ")";
}, 1000);

위의 코드는 랜덤한 색상으로 배경을 변경하는 코드입니다. 일정 시간마다 0~255 사이에서 랜덤한 값을 생성하여 rgb() 함수의 인수로 전달합니다.

이렇게 자바스크립트를 활용하면 다양한 신기한 효과를 만들 수 있습니다.

자바스크립트 신기한 효과, 이미지 슬라이드쇼, 마우스 감도, 랜덤한 색상, 동적 요소 제어