이미지 슬라이더를 만들 때 이미지를 확대/축소하는 애니메이션을 추가할 수 있습니다. 이 기능은 사용자들이 마우스를 이용하여 이미지를 확대하거나 축소할 수 있도록 해주어 사용자 경험을 향상시킵니다. 여기에서는 JavaScript 및 CSS를 사용하여 이미지 슬라이더에 이미지 확대/축소 애니메이션을 추가하는 방법을 살펴보겠습니다.

HTML 마크업

먼저, 이미지 슬라이더를 위한 HTML 마크업을 생성합니다. 각 이미지는 img 태그로 표시되며, 각각의 이미지는 고유한 ID를 가져야 합니다. 아래는 오픈 그래프에서 제공하는 HTML 마크업의 예시입니다.

<div class="slider">
    <img id="image1" src="image1.jpg" alt="Image 1">
    <img id="image2" src="image2.jpg" alt="Image 2">
    <img id="image3" src="image3.jpg" alt="Image 3">
</div>

CSS 스타일링

다음으로, 이미지를 확대/축소하기 위한 CSS 스타일을 추가합니다. 이를 통해 마우스 호버 시 이미지가 확대되고, 다시 호버를 해제하면 이미지가 축소됩니다. 아래는 간단한 CSS 예시입니다.

.slider img {
    transition: transform 0.3s ease;
}

.slider img:hover {
    transform: scale(1.2);
}

JavaScript 코드

마지막으로, JavaScript를 사용하여 이미지의 확대/축소 기능을 제어합니다. 이미지마다 고유한 ID가 있으므로, JavaScript에서는 각 이미지에 이벤트 리스너를 추가하여 확대/축소 애니메이션을 제어할 수 있습니다.

const images = document.querySelectorAll('.slider img');

images.forEach(image => {
    image.addEventListener('mouseenter', () => {
        image.style.transform = 'scale(1.2)';
    });

    image.addEventListener('mouseleave', () => {
        image.style.transform = 'scale(1.0)';
    });
});

마치며

이제 이미지 슬라이더에 이미지 확대/축소 애니메이션을 추가하는 방법에 대해 알아보았습니다. 이를 통해 사용자들은 슬라이더 내 이미지를 호버하여 확대/축소할 수 있게 되어 더 흥미로운 사용자 경험을 제공할 수 있습니다.

참고문헌:

• MDN Web Docs
• W3Schools