Table of Contents


자바스크립트로 만나는 환상적인 효과들

1. 화려한 이미지 슬라이더
자바스크립트를 사용하여 웹 페이지에 화려한 이미지 슬라이더를 추가할 수 있습니다. 다양한 이미지가 부드럽게 전환되며, 사용자들에게 동적이고 흥미로운 시각적 경험을 제공합니다.

// HTML
<div id="slider">
  <img src="image1.jpg" class="slide" />
  <img src="image2.jpg" class="slide" />
  <img src="image3.jpg" class="slide" />
</div>

// JavaScript
var slider = document.getElementById("slider");
var slides = slider.getElementsByClassName("slide");
var currentSlideIndex = 0;

function showNextSlide() {
  slides[currentSlideIndex].style.display = "none";
  currentSlideIndex = (currentSlideIndex + 1) % slides.length;
  slides[currentSlideIndex].style.display = "block";
}

setInterval(showNextSlide, 3000);

2. 움직이는 텍스트
자바스크립트를 사용하여 텍스트를 움직일 수 있습니다. 예를 들어, 글자가 천천히 나타나거나 사라지는 애니메이션 효과를 추가할 수 있습니다. 사용자의 시선을 확실히 끌 수 있습니다.

// HTML
<div id="moving-text">안녕하세요!</div>

// JavaScript
var movingText = document.getElementById("moving-text");
var opacity = 0;
var timeoutId;

function fadeIn() {
  opacity += 0.1;
  movingText.style.opacity = opacity;

  if (opacity < 1) {
    timeoutId = setTimeout(fadeIn, 100);
  }
}

function fadeOut() {
  opacity -= 0.1;
  movingText.style.opacity = opacity;

  if (opacity > 0) {
    timeoutId = setTimeout(fadeOut, 100);
  }
}

fadeIn();
setTimeout(fadeOut, 2000);

3. 클릭 이벤트로 내비게이션 메뉴 변경하기
자바스크립트를 사용하여 클릭 이벤트를 처리하여 웹 페이지의 내비게이션 메뉴를 변경할 수 있습니다. 사용자가 메뉴를 클릭하면 새로운 콘텐츠가 표시되어 원하는 정보에 빠르게 접근할 수 있습니다.

// HTML
<ul id="nav">
  <li id="home">홈</li>
  <li id="about">소개</li>
  <li id="contact">연락처</li>
</ul>

<div id="content">
  <div id="home-content">홈 내용</div>
  <div id="about-content">소개 내용</div>
  <div id="contact-content">연락처 내용</div>
</div>

// JavaScript
var nav = document.getElementById("nav");
var content = document.getElementById("content");

nav.addEventListener("click", function(event) {
  if (event.target.id === "home") {
    content.innerHTML = document.getElementById("home-content").innerHTML;
  } else if (event.target.id === "about") {
    content.innerHTML = document.getElementById("about-content").innerHTML;
  } else if (event.target.id === "contact") {
    content.innerHTML = document.getElementById("contact-content").innerHTML;
  }
});

4. 반응형 디자인
자바스크립트를 사용하여 반응형 디자인을 구현할 수 있습니다. 사용자의 화면 크기가 변경되면 웹 페이지가 동적으로 조정되어 최적의 사용자 경험을 제공합니다.

// JavaScript
window.addEventListener("resize", function() {
  var screenWidth = window.innerWidth;

  if (screenWidth < 768) {
    // 스마트폰 화면 크기일 때
    // 작은 이미지 표시
  } else if (screenWidth < 1024) {
    // 태블릿 화면 크기일 때
    // 중간 이미지 표시
  } else {
    // 데스크탑 화면 크기일 때
    // 큰 이미지 표시
  }
});

자바스크립트 신기한 효과로, 웹 페이지를 더욱 멋지게 만들어 보세요!