재미와 상상력을 자극하는 자바스크립트 효과

1. 지속적으로 움직이는 배경

const bg = document.querySelector('.background');
let x = 0;
setInterval(() => {
  x -= 1;
  bg.style.backgroundPosition = `${x}px 0`;
}, 10);

이 코드는 배경 이미지를 왼쪽으로 조금씩 이동시키는 코드입니다. `setInterval` 함수를 사용하여 일정한 시간 간격으로 `bg.style.backgroundPosition` 값을 변경해주어 배경 이미지가 움직이게 됩니다.

2. 반응형 글자 크기

const title = document.querySelector('.title');
window.addEventListener('resize', () => {
  const width = window.innerWidth;
  title.style.fontSize = `${width/10}px`;
});

이 코드는 브라우저의 크기가 변경될 때마다 제목 글자 크기를 조정하는 코드입니다. `window.addEventListener` 함수를 사용하여 브라우저 크기 변경 이벤트를 감지하고, `window.innerWidth` 값을 사용하여 윈도우의 너비를 구합니다. 그리고 `title.style.fontSize` 값을 변경하여 글자 크기를 조정합니다.

3. 클릭 시 이미지 변경

const img = document.querySelector('.image');
img.addEventListener('click', () => {
  const currentSrc = img.getAttribute('src');
  if(currentSrc === 'image1.jpg') {
    img.setAttribute('src', 'image2.jpg');
  } else {
    img.setAttribute('src', 'image1.jpg');
  }
});

이 코드는 이미지를 클릭할 때마다 이미지를 변경하는 코드입니다. `img.addEventListener` 함수를 사용하여 이미지 클릭 이벤트를 감지하고, `img.getAttribute` 함수를 사용하여 현재 이미지의 소스를 가져옵니다. 소스가 ‘image1.jpg’인 경우에는 소스를 ‘image2.jpg’로, 소스가 ‘image2.jpg’인 경우에는 소스를 ‘image1.jpg’로 변경합니다.

4. 마우스 따라 움직이는 객체

const obj = document.querySelector('.object');
window.addEventListener('mousemove', (e) => {
  const x = e.clientX;
  const y = e.clientY;
  obj.style.top = `${y}px`;
  obj.style.left = `${x}px`;
});

이 코드는 마우스의 움직임에 따라 객체가 움직이는 코드입니다. `window.addEventListener` 함수를 사용하여 마우스 이벤트를 감지하고, `e.clientX`와 `e.clientY` 값을 사용하여 마우스의 X,Y좌표를 구합니다. 그리고 `obj.style.top`과 `obj.style.left` 값을 변경하여 객체를 이동시킵니다.

5. 자동 완성 검색창

const input = document.querySelector('.search');
const autocomplete = ['apple', 'banana', 'cherry', 'durian'];
input.addEventListener('input', () => {
  const value = input.value;
  const suggestions = autocomplete.filter(item => item.includes(value));
  console.log(suggestions);
});

이 코드는 자동 완성 검색창을 만드는 코드입니다. `input.addEventListener` 함수를 사용하여 입력 이벤트를 감지하고, `autocomplete` 배열에서 `includes` 함수를 사용하여 현재 입력 값과 일치하는 값을 필터링합니다. 그리고 필터링된 값을 콘솔에 출력합니다.

이와 같은 다양한 자바스크립트 효과들을 활용하면 웹 사이트에 재미와 상상력을 더할 수 있습니다.

자바스크립트 재미있는 효과: 자바스크립트를 활용하여 웹 사이트를 더욱 흥미롭고 유동적으로 만들 수 있습니다.