[javascript] Ramjet을 활용한 이미지 갤러리의 슬라이드 효과

22 Nov 2023

javascript

이미지 갤러리에 슬라이드 효과를 적용하고 싶다면 Ramjet이라는 자바스크립트 라이브러리를 활용할 수 있습니다. Ramjet은 CSS의 transition 속성을 사용하여 부드러운 애니메이션을 적용하는 데 도움을 줍니다.

Ramjet 설치하기

Ramjet을 사용하기 위해서는 먼저 라이브러리를 설치해야 합니다. npm을 통해 설치할 수 있습니다.

npm install ramjet

이미지 갤러리 코드 예제

다음은 Ramjet을 사용하여 이미지 갤러리에 슬라이드 효과를 적용하는 코드의 예제입니다.

// HTML 구조
<div class="gallery">
    <div class="slide"><img src="image1.jpg"></div>
    <div class="slide"><img src="image2.jpg"></div>
    <div class="slide"><img src="image3.jpg"></div>
</div>

// CSS 스타일
.gallery {
    width: 500px;
    overflow: hidden;
}

.slide {
    position: absolute;
    width: 100%;
    height: 100%;
    transition: transform 0.5s;
}

// 자바스크립트 코드
const slides = document.querySelectorAll('.slide');
let currentSlide = 0;

function nextSlide() {
    const nextIndex = currentSlide === slides.length - 1 ? 0 : currentSlide + 1;
    animateSlides(currentSlide, nextIndex);
    currentSlide = nextIndex;
}

function animateSlides(fromIndex, toIndex) {
    const fromSlide = slides[fromIndex];
    const toSlide = slides[toIndex];
    const targetPosition = toSlide.getBoundingClientRect();

    ramjet.transform(fromSlide, toSlide, {
        duration: 500,
        done: () => {
            fromSlide.style.transform = '';
            fromSlide.style.transition = '';
        }
    });
}

// 슬라이드 전환 간격 설정 (3초마다 자동 전환)
setInterval(nextSlide, 3000);

위의 코드 예제를 사용하면 이미지 갤러리의 각 이미지가 자동으로 전환되며, 전환 애니메이션은 부드럽게 이루어집니다. 각 이미지는 slide 클래스로 지정된 div 요소 안에 감싸져 있으며, transition 속성을 사용하여 전환 효과를 부여합니다.

참고 자료

Ramjet 공식 문서