자바스크립트의 놀라운 효과들

자바스크립트는 웹 개발에서 가장 인기있는 언어 중 하나입니다. 이 언어의 강력한 특징 중 하나는 다양한 놀라운 효과를 만들 수 있다는 것입니다. 어떤 효과들이 있는지 알아보겠습니다.

1. 눈부신 애니메이션

function animate(element) {
  element.style.animation = 'spin 2s linear infinite';
}

animate(document.getElementById('logo'));

위 코드는 ‘spin’이라는 애니메이션을 로고 요소에 적용하는 예시입니다. 애니메이션 이름, 지속 시간, 반복 등을 원하는 대로 조절할 수 있습니다.

2. 스크롤 효과

window.addEventListener('scroll', function() {
  var distance = window.pageYOffset;
  
  if (distance > 500) {
    document.body.style.backgroundColor = 'blue';
  } else {
    document.body.style.backgroundColor = 'white';
  }
});

이 코드는 사용자가 스크롤할 때마다 화면 배경색을 변경합니다. 500px 스크롤을 통과하면 배경색이 파란색으로 변경되며, 다시 위로 올라갈 때는 원래의 흰색으로 돌아갑니다.

3. 드래그 앤 드롭

var draggable = document.getElementById('draggable');
var container = document.getElementById('container');

draggable.addEventListener('dragstart', function(event) {
  event.dataTransfer.setData('text', event.target.id);
});

container.addEventListener('dragover', function(event) {
  event.preventDefault();
});

container.addEventListener('drop', function(event) {
  var id = event.dataTransfer.getData('text');
  var element = document.getElementById(id);
  event.target.appendChild(element);
});

위 코드는 드래그 앤 드롭을 사용하여 요소를 이동시키는 예시입니다. draggable 요소를 container 요소 위로 드래그하면 드롭 이벤트가 발생하며, draggable 요소가 container 요소에 추가됩니다.

자바스크립트 신기한 효과: 자바스크립트의 다양한 효과들은 웹사이트를 더욱 생동감 있게 만들어줍니다. 애니메이션, 스크롤 효과, 드래그 앤 드롭 등을 통해 사용자 경험을 향상시킬 수 있습니다.