“ 당신이 6개월 이상 한 번도 보지 않은 코드는 다른 사람이 다시 만드는 게 훨씬 더 나을 수 있다. ”
슬라이드이펙트란?
웹 사이트나 애플리케이션에서 이미지나 콘텐츠를 슬라이딩하여 화면에 전환하는 효과를 의미합니다. 슬라이드 이펙트는 다양한 형태로 표현될 수 있으며, 주로 이미지 갤러리, 배너, 광고 등에서 사용됩니다.
슬라이드 이펙트는 사용자가 웹 페이지를 더욱 동적으로 느끼게 하고, 시각적인 흥미를 유발하여 사용자 경험을 향상시키는 효과를 가지고 있습니다. 또한, 슬라이드 이펙트는 화면 전환 시 부드러운 애니메이션을 제공하여 사용자가 불편함을 느끼지 않도록 도와줍니다.
주로 사용되는 슬라이드 이펙트에는 수평 슬라이드, 수직 슬라이드, 페이드 인/아웃, 카드 슬라이드, 돌리기, 점진적 슬라이드 등이 있습니다. 이러한 슬라이드 이펙트는 CSS와 JavaScript를 사용하여 구현할 수 있으며, 라이브러리나 프레임워크를 사용하여 더욱 쉽고 간편하게 구현할 수도 있습니다.
이번 슬라이드 이펙트는 위로 움직이는 효과를 적용했습니다.
슬라이드 이펙트(3) 사이트 코드
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>03. 슬라이드 이펙트</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/slider.css">
<style>
/* slider__wrap */
.slider__wrap {
width: 100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.slider__img { /* 이미지가 보이는 영역 */
position: relative;
width: 800px;
height: 450px;
overflow: hidden;
}
.slider__inner { /* 이미지 움직이는 영역 */
/* display: flex;
flex-wrap: wrap; */
width: 4000px;
height: 450px;
}
.slider { /* 개별적인 이미지 */
position: relative;
width: 800px;
height: 450px;
}
</style>
</head>
<body class="img07 bg03 font07">
<header id="header">
<h1>Javascript Slider Effect03</h1>
<p>슬라이드 이펙트 : 위로 움직이기</p>
<ul>
<li><a href="sliderEffect01.html">1</a></li>
<li><a href="sliderEffect02.html">2</a></li>
<li class="active"><a href="sliderEffect03.html">3</a></li>
<li><a href="sliderEffect04.html">4</a></li>
<li><a href="sliderEffect05.html">5</a></li>
<li><a href="sliderEffect06.html">6</a></li>
</ul>
</header>
<!-- //header -->
<main id="main">
<div class="slider__wrap">
<div class="slider__img">
<div class="slider__inner">
<div class="slider"><img src="./img/sliderEffect06-min.jpg" alt="이미지6"></div>
<div class="slider"><img src="./img/sliderEffect07-min.jpg" alt="이미지7"></div>
<div class="slider"><img src="./img/sliderEffect08-min.jpg" alt="이미지8"></div>
<div class="slider"><img src="./img/sliderEffect09-min.jpg" alt="이미지9"></div>
<div class="slider"><img src="./img/sliderEffect10-min.jpg" alt="이미지10"></div>
</div>
</div>
</div>
</main>
<!-- //main -->
슬라이드 이펙트(2) 와 거의 동일하지만, 이번에는 슬라이드가 위로 움직여야하기 때문에 .slider__inner 부분에 아래와 같이 주석처리를 해준 부분이 있습니다.
.slider__inner { /* 이미지 움직이는 영역 */
/* display: flex;
flex-wrap: wrap; */
width: 4000px;
height: 450px;
}script 코드
<script>
//선택자
const sliderWrap = document.querySelector(".slider__wrap");
const sliderImg = sliderWrap.querySelector(".slider__img"); //보여지는 영역
const sliderInner = sliderWrap.querySelector(".slider__inner"); //움직이는 영역
const slider = sliderWrap.querySelectorAll(".slider"); //개별 이미지
let currentIndex = 0; //현재 보이는 이미지
let sliderCount = slider.length; //이미지 갯수
let sliderInterval = 3000; //이미지 변경 간격 시간
// // javascript
// sliderInner.style.transform = translateX("-0px"); // -800 * 0
// sliderInner.style.transform = translateX("-800px"); // -800 * 1
// sliderInner.style.transform = translateX("-1600px"); // -800 * 2
// sliderInner.style.transform = translateX("-2400px"); // -800 * 3
// sliderInner.style.transform = translateX("-3200px"); // -800 * 4
// sliderInner.style.transform = translateX("-0px"); // -800 * 0
// 트랜지션 설정
sliderInner.style.transition = "all 0.6s";
setInterval(() => {
currentIndex = (currentIndex + 1) % sliderCount; //1 2 3 4 0 1 2 3 4 0
sliderInner.style.transform = "translateY("+ -450 * currentIndex + "px)";
}, sliderInterval);
</script>transition 속성은 CSS 애니메이션을 정의합니다. 여기서 "all 0.6s"는 모든 속성에 대한 0.6초 길이의 트랜지션을 설정합니다.
setInterval() 함수를 사용하여 주기적으로 이미지를 변경합니다. currentIndex 변수는 현재 보이는 이미지의 인덱스를 나타내며, sliderCount 변수는 이미지의 총 개수를 나타냅니다.
currentIndex를 (currentIndex + 1) % sliderCount로 업데이트하여 다음 이미지의 인덱스를 결정합니다.
% 연산자는 인덱스가 0부터 다시 시작되도록합니다.
예를 들어, 슬라이더에 5개의 이미지가 있으면, currentIndex 값은 0에서 4까지 증가하고 다시 0으로 돌아갑니다.
sliderInner.style.transform 속성은 CSS transform 속성을 사용하여 이미지 컨테이너의 위치를 변경합니다.
translateY() 함수는 Y 축 방향으로 요소를 이동합니다.
여기서 -450 * currentIndex는 현재 이미지의 인덱스에 따라 이동 거리를 계산합니다.
-450은 이미지의 높이를 나타내고, currentIndex는 현재 이미지의 인덱스를 나타냅니다.
위 과정을 GSAP, jQuery로도 작성할 수 있습니다.
GSAP
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script>
<script>
setInterval(() => {
currentIndex = (currentIndex + 1) % sliderCount;
gsap.to(".slider__inner", {
y : -450 * currentIndex,
duration : 1,
ease : "elastic.out(1, 0.3)"
})
}, sliderInterval);
</script>setInterval() 함수를 사용하여 일정 시간 간격으로 이미지를 바꿔줍니다. 그리고 currentIndex 변수와 sliderCount 변수를 사용하여 다음 이미지의 인덱스(nextIndex)를 계산합니다.
gsap.to() 메소드를 사용하여 .slider__inner 클래스에 y 속성을 이용하여 이미지를 이동시킵니다. y 속성은 요소의 y축 방향으로의 이동 거리를 지정합니다. 이 코드에서는 현재 인덱스에 해당하는 이미지의 높이(450px)를 곱하여 이동 거리를 계산합니다.
duration 속성은 애니메이션의 지속 시간을 지정하며, ease 속성은 애니메이션의 이징을 지정합니다. 이 코드에서는 elastic.out(1, 0.3) 이징 함수를 사용합니다.
마지막으로 currentIndex 변수를 nextIndex로 업데이트하여 다음 이미지를 보여주도록 합니다.
jQuery
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js"></script>
<script>
setInterval(() => {
currentIndex = (currentIndex + 1) % $(".slider").length;
$(".slider__inner").css("position", "relative");
$(".slider__inner").animate({top : -450 * currentIndex}, 600, "easeOutElastic");
}, sliderInterval);
</script>이 코드에서는 슬라이더를 포함하는 요소에 slider__inner 클래스를 추가하여 이 요소를 선택합니다. 그리고 .animate() 함수를 사용하여 top 속성을 이용해 요소를 움직입니다.
$(".slider__inner").animate({top : -450 * currentIndex}, 600, "easeOutElastic");
애니메이션 효과는 easeOutElastic으로 설정되어 있으며, 이는 움직임의 끝에 탄력적인 효과를 줍니다. 이러한 효과는 CSS 애니메이션 또는 트랜지션을 사용하여도 구현할 수 있습니다.
또한, 이 코드에서는 .css() 함수를 사용하여 position 속성을 relative로 설정합니다. 이렇게 함으로써 슬라이드 이미지가 상위 요소에 대해 상대적인 위치를 가지게 됩니다.
