“ 당신이 6개월 이상 한 번도 보지 않은 코드는 다른 사람이 다시 만드는 게 훨씬 더 나을 수 있다. ”
슬라이드이펙트란?
웹 사이트나 애플리케이션에서 이미지나 콘텐츠를 슬라이딩하여 화면에 전환하는 효과를 의미합니다. 슬라이드 이펙트는 다양한 형태로 표현될 수 있으며, 주로 이미지 갤러리, 배너, 광고 등에서 사용됩니다.
슬라이드 이펙트는 사용자가 웹 페이지를 더욱 동적으로 느끼게 하고, 시각적인 흥미를 유발하여 사용자 경험을 향상시키는 효과를 가지고 있습니다. 또한, 슬라이드 이펙트는 화면 전환 시 부드러운 애니메이션을 제공하여 사용자가 불편함을 느끼지 않도록 도와줍니다.
주로 사용되는 슬라이드 이펙트에는 수평 슬라이드, 수직 슬라이드, 페이드 인/아웃, 카드 슬라이드, 돌리기, 점진적 슬라이드 등이 있습니다. 이러한 슬라이드 이펙트는 CSS와 JavaScript를 사용하여 구현할 수 있으며, 라이브러리나 프레임워크를 사용하여 더욱 쉽고 간편하게 구현할 수도 있습니다.
이번 슬라이드 이펙트는 좌로 움직이지만 끝나지 않고 연속적으로 보이는 효과를 적용했습니다.
슬라이드 이펙트(4) 코드
<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>04. 슬라이드 이펙트</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: 4800px; /* 총 이미지 영역 */
height: 450px;
}
.slider { /* 개별적인 이미지 */
position: relative;
width: 800px;
height: 450px;
}
</style>
</head>
<body class="img08 bg04 font05">
<header id="header">
<h1>Javascript Slider Effect04</h1>
<p>슬라이드 이펙트 : 좌로 움직이기(연속적으로)</p>
<ul>
<li><a href="sliderEffect01.html">1</a></li>
<li><a href="sliderEffect02.html">2</a></li>
<li><a href="sliderEffect03.html">3</a></li>
<li class="active"><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 s1"><img src="./img/sliderEffect03-min.jpg" alt="이미지3"></div>
<div class="slider s2"><img src="./img/sliderEffect04-min.jpg" alt="이미지4"></div>
<div class="slider s3"><img src="./img/sliderEffect06-min.jpg" alt="이미지6"></div>
<div class="slider s4"><img src="./img/sliderEffect08-min.jpg" alt="이미지8"></div>
<div class="slider s5"><img src="./img/sliderEffect09-min.jpg" alt="이미지09"></div>
</div>
</div>
</div>
</main>
<!-- //main -->
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 = 2000; //이미지 변경 간격 시간
let sliderWidth = slider[0].offsetWidth; //이미지 가로 값
let sliderClone = sliderInner.firstElementChild.cloneNode(true); //첫번째 이미지 복사
// 복사한 첫 번째 이미지 마지막에 붙여넣기
sliderInner.appendChild(sliderClone);
function sliderEffect(){
currentIndex++;
sliderInner.style.transition = "all 0.6s";
sliderInner.style.transform = "translateX(-"+ sliderWidth * currentIndex +"px)";
//마지막 이미지에 위치 했을 때
if(currentIndex == sliderCount){
setTimeout(() => {
sliderInner.style.transition = "0s";
sliderInner.style.transform = "translateX(0px)";
}, 700);
currentIndex = 0;
}
}
setInterval(sliderEffect, sliderInterval);
</script>먼저, HTML에서 이미지 슬라이더를 구현하는데 필요한 요소들을 선택하는 선택자를 정의합니다.
.slider__wrap 클래스를 가진 요소는 슬라이더 전체를 감싸는 영역을 나타냅니다.
.slider__img 클래스를 가진 요소는 실제 이미지가 보여지는 영역을 나타내며, .slider__inner 클래스를 가진 요소는 이미지가 움직이는 영역을 나타냅니다.
마지막으로 .slider 클래스를 가진 요소는 개별 이미지를 나타냅니다.
그 후에는 슬라이더의 초기 설정값들을 정의합니다. currentIndex 변수는 현재 보여지는 이미지를 나타내며, sliderCount 변수는 이미지의 갯수를 나타냅니다.
sliderInterval 변수는 이미지 변경 간격 시간을 설정하며, sliderWidth 변수는 이미지의 가로 크기를 나타냅니다.
다음으로, 첫번째 이미지를 복사하여 마지막 이미지 다음에 붙여넣는 코드를 작성합니다.
이를 통해 마지막 이미지가 보여진 후에 첫번째 이미지가 다시 나타나는 무한 슬라이더 기능을 구현할 수 있습니다.
그 다음으로는 실제 슬라이더 기능을 동작시키는 함수 sliderEffect를 정의합니다.
이 함수는 setInterval을 통해 일정한 간격으로 호출됩니다.
함수 내에서는 currentIndex 변수를 증가시키고, sliderInner 요소의 transition 속성과 transform 속성을 변경하여 이미지를 움직입니다.
만약 마지막 이미지에 위치하게 되면, setTimeout 함수를 통해 0.7초 후에 sliderInner 요소의 transition 속성과 transform 속성을 초기값으로 변경하여 첫번째 이미지로 되돌아가게 합니다.
위 과정을 GSAP, jQuery로도 작성할 수 있습니다.
GSAP
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script>
<script>
// 첫번째 이미지를 마지막에 복사하여 붙여넣기
sliderInner.appendChild(sliderClone);
function sliderEffect(){
currentIndex++;
gsap.to(sliderInner, {
duration: 0.6,
x: -sliderWidth * currentIndex,
ease: "power2.out",
});
if(currentIndex === sliderCount){
setTimeout(() =>{
gsap.set(sliderInner, {x: 0});
currentIndex = 0;
},700);
}
}
setInterval(sliderEffect, sliderInterval);
</script>GSAP 라이브러리를 사용하여 애니메이션 효과를 적용하는 코드를 작성합니다.
sliderEffect 함수 내에서는 gsap.to() 함수를 호출하여 sliderInner 요소의 x 속성을 변경합니다.
duration 속성은 애니메이션의 지속시간을 설정하며, ease 속성은 애니메이션의 이징 효과를 설정합니다.
onComplete 콜백 함수를 사용하여 애니메이션이 끝난 후에 실행되는 로직을 구현합니다.
만약 currentIndex 값이 sliderCount 값과 같아진다면, gsap.set() 함수를 호출하여 sliderInner 요소의 x 속성을 초기값으로 변경하고, currentIndex 값을 0으로 초기화하여 첫번째 이미지로 되돌아가게 합니다.
마지막으로, setInterval 함수를 통해 sliderEffect 함수를 일정한 간격으로 호출하도록 설정합니다.
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>
// 첫번째 이미지를 마지막에 복사하여 붙여넣기
$(".slider__inner").append(sliderClone);
function sliderEffect() {
currentIndex++;
$(".slider__inner").css({
"transition": "all 0.6s",
"transform": "translateX(-" + sliderWidth * currentIndex + "px)"
});
// 마지막 이미지에 위치 했을 때
if (currentIndex === sliderCount) {
setTimeout(function() {
$(".slider__inner").css({
"transition": "0s",
"transform": "translateX(0px)"
});
}, 700);
currentIndex = 0;
}
}
setInterval(sliderEffect, sliderInterval);
</script>jQuery를 사용하여 애니메이션 효과를 적용하는 코드를 작성합니다.
sliderEffect 함수 내에서는 .css() 함수를 호출하여 sliderInner 요소의 transition과 transform 속성을 변경합니다.
이를 통해 슬라이더 이미지가 일정한 간격으로 이동하도록 합니다.
만약 currentIndex 값이 sliderCount 값과 같아진다면, setTimeout() 함수를 호출하여 sliderInner 요소의 transition과 transform 속성을 초기값으로 변경하도록 합니다. 이를 통해 이미지 슬라이더가 처음 상태로 되돌아가게 합니다.
마지막으로, setInterval 함수를 통해 sliderEffect 함수를 일정한 간격으로 호출하도록 설정합니다.
