“ 당신이 6개월 이상 한 번도 보지 않은 코드는 다른 사람이 다시 만드는 게 훨씬 더 나을 수 있다. ”
슬라이드이펙트란?
웹 사이트나 애플리케이션에서 이미지나 콘텐츠를 슬라이딩하여 화면에 전환하는 효과를 의미합니다. 슬라이드 이펙트는 다양한 형태로 표현될 수 있으며, 주로 이미지 갤러리, 배너, 광고 등에서 사용됩니다.
슬라이드 이펙트는 사용자가 웹 페이지를 더욱 동적으로 느끼게 하고, 시각적인 흥미를 유발하여 사용자 경험을 향상시키는 효과를 가지고 있습니다. 또한, 슬라이드 이펙트는 화면 전환 시 부드러운 애니메이션을 제공하여 사용자가 불편함을 느끼지 않도록 도와줍니다.
주로 사용되는 슬라이드 이펙트에는 수평 슬라이드, 수직 슬라이드, 페이드 인/아웃, 카드 슬라이드, 돌리기, 점진적 슬라이드 등이 있습니다. 이러한 슬라이드 이펙트는 CSS와 JavaScript를 사용하여 구현할 수 있으며, 라이브러리나 프레임워크를 사용하여 더욱 쉽고 간편하게 구현할 수도 있습니다.
이번 슬라이드 이펙트는 좌로 움직이는 효과를 적용했습니다.
슬라이드 이펙트(2) 사이트 코드
<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>02. 슬라이드 이펙트</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 Effect02</h1>
<p>슬라이드 이펙트 : 좌로 움직이기</p>
<ul>
<li><a href="sliderEffect01.html">1</a></li>
<li class="active"><a href="sliderEffect02.html">2</a></li>
<li><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 -->
이번 css에는 이미지가 보이는 영역, 이미지가 움직이는 영역, 개별적인 이미지 영역에 맞게 css를 설정해주었습니다.
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 = "translateX("+ -800 * currentIndex + "px)";
}, sliderInterval);
</script>
추가 선택자
const sliderInner = sliderWrap.querySelector(".slider__inner"); //움직이는 영역
트랜지션 설정
// 트랜지션 설정
sliderInner.style.transition = "all 0.6s";
setInterval(() => {
currentIndex = (currentIndex + 1) % sliderCount; //1 2 3 4 0 1 2 3 4 0
sliderInner.style.transform = "translateX("+ -800 * currentIndex + "px)";
}, sliderInterval);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 속성을 사용하여 이미지 컨테이너의 위치를 변경합니다.
translateX() 함수는 X 축 방향으로 요소를 이동합니다.
여기서 -800 * currentIndex는 현재 이미지의 인덱스에 따라 이동 거리를 계산합니다.
-800은 이미지의 너비를 나타내고, 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", {
x : -800 * currentIndex,
duration : 1,
ease : "elastic.out(1, 0.3)"
})
}, sliderInterval);
</script>코드를 살펴보면, setInterval 함수 내에서 이미지를 변경하는 로직을 작성하고 있습니다. 현재 인덱스 currentIndex를 1씩 증가시키고, 슬라이드 이미지의 전체 개수인 sliderCount로 나눈 나머지를 새로운 인덱스로 지정합니다. 이렇게 함으로써, 인덱스가 슬라이드 이미지의 범위를 벗어나는 것을 방지할 수 있습니다.
그 다음, GSAP의 to 메서드를 사용하여, .slider__inner 클래스에 x 속성을 적용합니다. 이 속성은 이미지의 가로 방향 이동을 나타내며, -800 * currentIndex 값으로 설정되어 있습니다. 이는 이미지가 800px씩 왼쪽으로 이동하는 것을 의미합니다.
이동에 걸리는 시간은 duration 속성으로 설정됩니다. 여기서는 1로 지정되어 있습니다. 또한, ease 속성을 사용하여, 이동 애니메이션에 elastic.out(1, 0.3) 이펙트를 적용하도록 설정되어 있습니다. 이러한 설정으로, 이미지 이동 애니메이션의 자연스러운 효과를 구현할 수 있습니다.
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({left : -800 * currentIndex}, 600, "easeOutElastic");
}, sliderInterval);
</script>- setInterval() : 일정한 시간 간격으로 함수를 실행하는 JavaScript 메서드입니다. 위 코드에서는 이 메서드를 사용하여 슬라이더를 자동으로 움직이도록 합니다.
- currentIndex : 현재 보이는 슬라이드의 인덱스를 저장하는 변수입니다.
- $() : jQuery에서 사용하는 문법으로, CSS 선택자를 사용하여 HTML 요소를 선택합니다.
- $(".slider").length : jQuery에서 $(".slider")와 같이 CSS 선택자를 사용하여 선택한 요소들의 개수를 반환합니다.
- .css() : 선택한 요소의 CSS 속성 값을 설정하거나 반환하는 jQuery 메서드입니다.
- .animate() : 요소를 부드러운 애니메이션으로 움직이도록 하는 jQuery 메서드입니다. 첫 번째 인자로는 CSS 속성과 값을, 두 번째 인자로는 애니메이션의 지속 시간(ms), 세 번째 인자로는 이징 효과를 설정할 수 있습니다.
- "easeOutElastic" : jQuery UI에서 제공하는 이징 효과 중 하나로, 탄성 효과를 준 애니메이션을 구현할 수 있습니다.
