“ 당신이 6개월 이상 한 번도 보지 않은 코드는 다른 사람이 다시 만드는 게 훨씬 더 나을 수 있다. ”
슬라이드이펙트란?
웹 사이트나 애플리케이션에서 이미지나 콘텐츠를 슬라이딩하여 화면에 전환하는 효과를 의미합니다. 슬라이드 이펙트는 다양한 형태로 표현될 수 있으며, 주로 이미지 갤러리, 배너, 광고 등에서 사용됩니다.
슬라이드 이펙트는 사용자가 웹 페이지를 더욱 동적으로 느끼게 하고, 시각적인 흥미를 유발하여 사용자 경험을 향상시키는 효과를 가지고 있습니다. 또한, 슬라이드 이펙트는 화면 전환 시 부드러운 애니메이션을 제공하여 사용자가 불편함을 느끼지 않도록 도와줍니다.
주로 사용되는 슬라이드 이펙트에는 수평 슬라이드, 수직 슬라이드, 페이드 인/아웃, 카드 슬라이드, 돌리기, 점진적 슬라이드 등이 있습니다. 이러한 슬라이드 이펙트는 CSS와 JavaScript를 사용하여 구현할 수 있으며, 라이브러리나 프레임워크를 사용하여 더욱 쉽고 간편하게 구현할 수도 있습니다.
이번 슬라이드 이펙트는 위로 움직이지만 끝나지 않고 연속적으로 보이는 효과를 적용했습니다.
슬라이드 이펙트(5) 코드
<!DOCTYPE html>
<html lang="ko">
<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>05. 슬라이드 이펙트</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="img02 bg04 font03">
<header id="header">
<h1>Javascript Slider Effect05</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><a href="sliderEffect04.html">4</a></li>
<li class="active"><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 sliderHeight = slider[0].offsetHeight; //이미지 세로 값
let sliderClone = sliderInner.firstElementChild.cloneNode(true); //첫번째 이미지 복사
// 복사한 첫 번째 이미지 마지막에 붙여넣기
sliderInner.appendChild(sliderClone);
function sliderEffect(){
currentIndex++;
sliderInner.style.transition = "all 0.6s";
sliderInner.style.transform = "translateY(-"+ sliderHeight * currentIndex +"px)";
//마지막 이미지에 위치 했을 때
if(currentIndex == sliderCount){
setTimeout(() => {
sliderInner.style.transition = "0s";
sliderInner.style.transform = "translateY(0px)";
}, 700);
currentIndex = 0;
}
}
setInterval(sliderEffect, sliderInterval);
</script>HTML 문서에서 슬라이더를 담는 요소를 선택하고, 해당 요소 안에 있는 이미지들을 선택합니다.
슬라이더 내부의 이미지들을 감싸는 요소의 높이를 구하고, 이미지의 개수를 변수에 저장합니다.
첫 번째 이미지를 복제(clone)하고, 해당 복제본을 슬라이더 내부의 마지막에 추가(append)합니다. 이는 슬라이더를 무한 반복하는데 필요한 작업입니다.
그 다음으로, 슬라이더 효과(sliderEffect)를 구현하는 함수를 선언합니다. 이 함수는 슬라이더 이미지가 자동으로 이동하는 효과를 만들어 줍니다.
함수 내부에서는 currentIndex 변수를 1씩 증가시키고, 이동 애니메이션 효과를 주는 CSS 속성인 transition과 transform을 이용하여, 슬라이더 이미지를 이동시킵니다. translateY 함수를 이용하여, 이미지를 세로 방향으로 이동시키며, currentIndex와 sliderHeight를 곱하는 이유는, 현재 이미지의 위치를 구하기 위해서입니다.
그리고, 마지막 이미지에 위치했을 경우를 처리하기 위해, currentIndex가 sliderCount와 같아지면, 슬라이더를 다시 처음으로 이동시키는 작업을 합니다. 이때, setTimeout 함수를 이용하여, 일정 시간(700ms)이 지난 후에 슬라이더를 처음 위치로 이동시키도록 합니다.
마지막으로, setInterval 함수를 이용하여, sliderEffect 함수를 일정 시간 간격으로 반복 실행하도록 합니다. 이때, sliderInterval 변수에는 이미지가 이동하는 간격을 저장하도록 합니다.
GSAP
<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,
y: -sliderHeight * currentIndex,
ease: "power2.out",
});
if(currentIndex === sliderCount){
setTimeout(() =>{
gsap.set(sliderInner, {y: 0});
currentIndex = 0;
},700);
}
}
setInterval(sliderEffect, sliderInterval);
</script>
첫 번째 이미지를 복제(clone)하여 슬라이더 내부의 마지막에 추가(append)하는 코드가 있습니다. 슬라이더를 무한 반복하는데 필요한 작업입니다.
그 다음으로, 슬라이더 효과(sliderEffect)를 구현하는 함수를 선언합니다. 이 함수는 GSAP의 to 메서드를 이용하여, 슬라이더 이미지가 자동으로 이동하는 효과를 만들어 줍니다.
to 메서드에는 다양한 옵션들이 들어갑니다. duration은 애니메이션의 지속 시간을 나타내며, y는 translateY 함수와 같은 기능을 수행하여, 이미지를 세로 방향으로 이동시킵니다. ease는 이동 애니메이션의 타이밍 함수를 설정하며, "power2.out"은 일정한 가속도로 이동하다가, 빠르게 감속하는 타이밍 함수입니다.
그리고, 마지막 이미지에 위치했을 경우를 처리하기 위해, currentIndex가 sliderCount와 같아지면, setTimeout 함수를 이용하여, 일정 시간(700ms)이 지난 후에 슬라이더를 처음 위치로 이동시키도록 합니다. 이때, GSAP의 set 메서드를 이용하여, 슬라이더를 이동시키지 않고, 바로 처음 위치로 설정합니다.
마지막으로, setInterval 함수를 이용하여, sliderEffect 함수를 일정 시간 간격으로 반복 실행하도록 합니다. 이때, sliderInterval 변수에는 이미지가 이동하는 간격을 저장하도록 합니다.
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": "translateY(-" + sliderHeight * currentIndex + "px)"
});
// 마지막 이미지에 위치 했을 때
if (currentIndex === sliderCount) {
setTimeout(function() {
$(".slider__inner").css({
"transition": "0s",
"transform": "translateY(0px)"
});
}, 700);
currentIndex = 0;
}
}
setInterval(sliderEffect, sliderInterval);
</script>
HTML 문서에서 jQuery와 jQuery UI 라이브러리를 가져오는 코드가 포함되어 있습니다.
첫 번째 이미지를 복제(clone)하여 슬라이더 내부의 마지막에 추가(append)하는 코드가 있습니다. 이는 슬라이더를 무한 반복하는데 필요한 작업입니다.
슬라이더 효과(sliderEffect)를 구현하는 함수를 선언합니다. 이 함수는 jQuery의 css 메서드를 이용하여, 슬라이더 이미지가 자동으로 이동하는 효과를 만들어 줍니다.
css 메서드에는 다양한 스타일 속성들이 들어갑니다. transition과 transform은 각각 애니메이션의 지속 시간과 위치를 설정합니다. sliderHeight와 currentIndex를 곱하여, 이미지를 세로 방향으로 이동시킵니다.
그리고, 마지막 이미지에 위치했을 경우를 처리하기 위해, currentIndex가 sliderCount와 같아지면, setTimeout 함수를 이용하여, 일정 시간(700ms)이 지난 후에 슬라이더를 처음 위치로 이동시키도록 합니다. 이때, jQuery의 css 메서드를 이용하여, 슬라이더를 이동시키지 않고, 바로 처음 위치로 설정합니다.
마지막으로, setInterval 함수를 이용하여, sliderEffect 함수를 일정 시간 간격으로 반복 실행하도록 합니다. 이때, sliderInterval 변수에는 이미지가 이동하는 간격을 저장하도록 합니다.
