재미있는 자바스크립트 효과들: 이것만은 꼭 알아봐!

자바스크립트는 웹 개발을 위해 필수적인 언어입니다. 하지만, 그 이상의 기능을 수행할 수 있는 재미있는 효과들도 많이 존재합니다. 이번 포스트에서는 그 중 일부를 살펴보겠습니다.

무한 스크롤

무한 스크롤은 사용자 경험을 높이기 위해 많이 사용되는 기술 중 하나입니다. 아래 코드는 무한 스크롤을 구현한 예시입니다.

window.addEventListener('scroll', () => {
   const {scrollTop, scrollHeight, clientHeight} = document.documentElement;
   if (scrollTop + clientHeight >= scrollHeight - 5) {
      // 무한 스크롤을 위한 코드
   }
});

위 코드는 스크롤이 최하단에서 5px이내로 내려가면 새로운 콘텐츠를 로드하는 기능을 수행합니다.

모달 팝업

모달 팝업은 유용한 기능 중 하나입니다. 아래 코드는 모달 팝업을 구현한 예시입니다.

const modal = document.getElementById("myModal");
const btn = document.getElementById("myBtn");
const span = document.getElementsByClassName("close")[0];

btn.onclick = function() {
  modal.style.display = "block";
}

span.onclick = function() {
  modal.style.display = "none";
}

window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}

위 코드는 버튼을 클릭하면 모달 창이 나타나며, 모달 창의 배경을 클릭하거나 닫기 버튼을 누르면 모달 창이 사라지도록 구현한 예시입니다.

투명도 이동

이동하는 투명도는 웹 페이지에서 시각적 효과를 적용하는 데 사용됩니다. 아래 코드는 이동하는 투명도를 구현한 예시입니다.

let opacity = 0;
let intervalID = 0;

function fadeIn() {
  intervalID = setInterval(show, 50);
}

function show() {
  const body = document.querySelector('body');
  opacity += 0.05;
  body.style.opacity = opacity;
  if (opacity >= 1.0) {
    clearInterval(intervalID);
  }
}

위 코드는 웹 페이지를 점진적으로 표시하기 위해 투명도를 0부터 1까지 0.05씩 증가시킵니다.

이처럼 다양한 자바스크립트 기능을 활용하면 더욱 흥미로운 웹 페이지를 만들 수 있습니다.

자바스크립트 재미있는 효과를 활용하여 사용자 경험을 높이세요!