[javascript] 자바스크립트로 페이드 인/아웃 애니메이션을 적용할 수 있는 슬라이더 요소
웹 개발에서 시각적인 요소를 부드럽게 보여주는 효과는 사용자 경험을 향상시키는 데 도움이 됩니다. 페이드 인/아웃 애니메이션을 적용하여 사진 또는 내용을 전환하는 슬라이더 요소는 이를 구현하는 좋은 방법 중 하나입니다.
HTML 구조
우선, HTML 구조를 작성합니다. 단순히 이미지 또는 내용을 담을 div 요소와 이동할 이전, 다음 버튼을 추가합니다.
<div class="slider">
<div class="slide"><img src="image1.jpg" alt="Image 1"></div>
<div class="slide"><img src="image2.jpg" alt="Image 2"></div>
<div class="slide"><img src="image3.jpg" alt="Image 3"></div>
<button id="prevBtn">이전</button>
<button id="nextBtn">다음</button>
</div>
CSS 스타일링
이미지나 내용을 가리키는 div 요소와 버튼에 대한 기본 CSS 스타일을 추가합니다.
.slider {
position: relative;
overflow: hidden;
}
.slide {
display: none;
position: absolute;
width: 100%;
height: auto;
}
button {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 1;
cursor: pointer;
}
#prevBtn {
left: 10px;
}
#nextBtn {
right: 10px;
}
자바스크립트로 애니메이션 추가
이제 자바스크립트를 사용하여 슬라이더 요소에 애니메이션을 추가합니다. 간단한 애니메이션 라이브러리를 사용할 수 있지만, 순수 자바스크립트로도 구현할 수 있습니다.
let currentSlide = 0;
const slides = document.querySelectorAll('.slide');
const prevBtn = document.getElementById('prevBtn');
const nextBtn = document.getElementById('nextBtn');
function showSlide(index) {
for (let i = 0; i < slides.length; i++) {
if (i === index) {
slides[i].style.display = 'block';
} else {
slides[i].style.display = 'none';
}
}
}
function prevSlide() {
currentSlide = (currentSlide - 1 + slides.length) % slides.length;
showSlide(currentSlide);
}
function nextSlide() {
currentSlide = (currentSlide + 1) % slides.length;
showSlide(currentSlide);
}
prevBtn.addEventListener('click', prevSlide);
nextBtn.addEventListener('click', nextSlide);
위 코드는 현재 슬라이드 인덱스를 추적하고, 이전 및 다음 버튼 클릭 시에 이를 조정하여 해당 슬라이드를 보여줍니다.
애니메이션 효과를 부드럽게 적용하려면 CSS 트랜지션 또는 CSS 애니메이션을 사용하여 이미지 페이드 인/아웃 효과를 추가할 수 있습니다.
마무리
이제 당신은 자바스크립트를 사용하여 페이드 인/아웃 애니메이션을 적용한 간단한 슬라이더 요소를 만들었습니다. 이를 통해 사용자에게 시각적으로 매력적인 콘텐츠를 제공할 수 있게 되었습니다.