“ 지연되는 프로젝트에 인력을 더 투입하면 오히려 더 늦어진다. ”
- Frederick Philips Brooks
Mythical Man-Month 저자
728x90
슬라이드 이펙트 04
"왼쪽으로 연속적으로 움직이는 이미지 슬라이드 만들기"
슬라이드 이펙트 04번은 왼쪽으로 연속적으로 움지이는 이미지 슬라이드를 만들어 보았습니다. 저번에 만들었던 왼쪽으로 움직이는 슬라이드 이펙트 02번을 참고해서 이번에는 연속적으로 움직일 수 있는 슬라이드 이펙트를 사용해 보았습니다.
슬라이드 이펙트 02 참고하기
https://younajeong.tistory.com/66
슬라이드 이펙트02 - 좌에서 우로 넘어가는 이미지 슬라이드효과!
슬라이드 이펙트 02 - 왼쪽에서 오른쪽으로 넘어가는 슬라이드효과 슬라이드 이펙트 01번과 다른느낌으로 이번에는 왼쪽에서 오른쪽으로 넘어가는 슬라이드 효과를 만들어 보았습니다! 슬라이
younajeong.tistory.com
<완성본>
HTML & CSS
<!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>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: 520px;
overflow: hidden;
}
/* 이미지 움직이는 영역 4800=총 이미지 */
.slider__inner {
display: flex;
flex-wrap: wrap;
width: 4800px;
height: 520px;
}
/* 개별적인 이미지 */
.slider {
position: relative;
width: 800px;
height: 520px;
}
</style>
</head>
<!-- //header -->
<body class="img04 bg04 font04">
<header id="header">
<h1>Javascript sliderEffect04</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>
<main id="main">
<div class="slider__wrap">
<div class="slider__img">
<div class="slider__inner">
<div class="slider s1"><img src="./img/sliderEffect02-min.jpg" alt="이미지1"></div>
<div class="slider s2"><img src="./img/sliderEffect04-min.jpg" alt="이미지2"></div>
<div class="slider s3"><img src="./img/sliderEffect06-min.jpg" alt="이미지3"></div>
<div class="slider s4"><img src="./img/sliderEffect08-min.jpg" alt="이미지4"></div>
<div class="slider s5"><img src="./img/sliderEffect10-min.jpg" alt="이미지5"></div>
</div>
</div>
</div>
</main>
<!-- //main -->
<footer id="footer">
<a href="mailto:jeongyouna_@naver.com">jeongyouna_@naver.com</a>
</footer>
<!-- //footer -->HTML & CSS
저번에 썼던 코드를 그대로 가져와서 HTML과 CSS를 만들어 줍니다. 대신 slider__inner부분에 widht값을 전체 값으로 바꿔주어 4800으로 지정해 놓습니다.
Javascript
<script>
//선택자
const sliderWrap = document.querySelector(".slider__wrap");
const sliderImg = sliderWrap.querySelector(".slider__img"); //보여지는 영역
const slider = sliderWrap.querySelectorAll(".slider"); //개별 이미지
const sliderInner = sliderWrap.querySelector(".slider__inner"); //움직이는 영역
let currentIndex = 0; //현재 보이는 이미지
let sliderCount = slider.length; //전체 이미지 갯수
let sliderWidth = slider[0].offsetWidth //이미지 가로 값
let sldierClone = sliderInner.firstElementChild.cloneNode(true); //첫번째 이미지 복사 : 첫번째 이미지를 복사해서 붙여준다.
let sliderInterval = 3000; //이미지 변경 간격 시간
</script>
<script>
//javascript
//복사한 첫번째 이미지 마지막에 붙여넣기
sliderInner.appendChild(sldierClone);
function sliderEffect() {
currentIndex++;
sliderInner.style.transition = "all 0.6s";
sliderInner.style.transform = "translateX(-"+ sliderWidth * currentIndex +" px)";
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>javascript
- 먼저 저번에 가져온 선택자 그대로 선택자와 변수를 선언해 주었습니다. 대신 이번에 구해야할 값은 slide의 width값을 선택자로 구하는 건데 800의 값을 가져오기 위해서 offsetWidth값을 사용해서 선택자를 가져왔습니다.
- 이미지가 연속적으로 나오기 위해서는 첫번째 이미지가 복사가 되어서 뒤로 붙여져야 하기 위해서 첫번째 이미지 복사 선택자도 SliderClone으로 선택자를 만들어 주었습니다. 이미지 복사 선택자는 sliderInner에서 첫번째요소의 자식이 cloneNode가 ture일 경우의 SliderColne이 될 수 있습니다.
- 함수를 실행하여서 sliderEffect()함수를 만들어서 setinterval()메소드를 사용하여 일정 시간마다 이 함수를 실행합니다.
- sliderEffect()함수는 currentindex값을 증가시킵니다.
- sliderlnner요소의 transition과 transform속성을 변경하여 이미지를 이동시킵니다.
- if문을 사용해서 currentIndex값이 sliderCount값과 같아지면 setTimout()함수를 사용하여 0.7초 후에 첫번째 이미지로 이동하도록 설정합니다.
- 그리고 복사한 첫번째 이미지가 마지막에 붙을 수 있도록 appendChlid()메소드를 사용합니다.
GSAP
<!-- GSAP -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script>
<script>
function sliderEffect() {
currentIndex++;
gsap.to(sliderInner, {
duration: 0.3,
x: -sliderWidth * currentIndex,
ease: "power2.out"
});
if(currentIndex == sliderCount) {
setTimeout(() => {
gsap.set(sliderInner, {
x: 0
});
currentIndex = 0;
},700);
}
}
setInterval(sliderEffect, sliderInterval);
</script>gsap
gsap.to()메소드를 사용하여 sliderInner요소에 애니메이션을 적용합니다. duration속성은 애니메이션 지속 시간을 나타내며 x 속성은 요소의 x축 이동 거리를 나타냅니다. sliderWidth는 이미지 하나의 너비를 나타내며 currentIdex와 곱하여 현재 이미지의 위치를 결정합니다. ease속성은 애니메이션의 가속도르르 나타내며, power2.out은 천천히 가속하는 가속도를 나타냅니다.
if문을 사용하여 currentIndex가 slidercount와 같아지면 모든 이미지를 한 바퀴 돈 것으로 판단하고, 0번째 이미지로 이동합니다. setTimeout()메소드를 사용하여 0.7초 후에 애니메이션을 적용합니다. gsap.to()메소드를 사용하여 sliderEffect()함수를 일정한 시간 간격으로 호출합니다. sliderInterval은 이미지가 전환되는 시간 간격을 나타내며, 이 값은 이전에 정의되어 있어야 합니다.
jQuery
<!-- 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>
//선택자
const sliderWrap = $(".slider__wrap");
const sliderImg = $(".slider__img");
const sliderInner = $(".slider__inner");
const slider = $(".slider");
let currentIndex = 0; //현재 보이는 이미지
let sliderCount = slider.length; //전체 이미지 갯수
let sliderInterval = 3000; //이미지 변경되는 간격 시간
let sliderWidth = slider.eq(0).outerWidth(); //이미지 가로값
let sliderClone = sliderInner.find(".slider:first-child").clone(); //첫번쨰 이미지 복사
//복사한 첫 번쨰 이미지 마지막에 붙여넣기
sliderInner.append(sliderClone);
function sliderEffect(){
currentIndex++;
sliderInner.css("transition", "all 0.6s");
sliderInner.css("transform", `translateX(-${sliderWidth * currentIndex}px)`);
//마지막 이미지에 위치 했을때
if(currentIndex == sliderCount){
setTimeout(()=>{
sliderInner.css("transition", "0s");
sliderInner.css("transform", `translateX(0px)`);
},700);
currentIndex = 0;
}
}
setInterval(sliderEffect, sliderInterval);
</script>jQuery
먼저 선택자에 관련된 요소들을 변수에 할당합니다. sliderEffect()함수는 setInterval()메소드에 의해 일정한 시간 간격으로 호출 되는데 currentIndex값을 1씩 증가시켜서 현재 이미지를 변경합니다. sliderInner요소에 trasition 속성과 transform속성을 적용하여 애니메이션을 적용하는데 transform 속성은 현재 이미지의 위치를 결정하는데 사용되며, sliderInner.css("transform", `translateX(-${sliderWidth * currentIndex}px)`); 의 형태로 지정됩니다. if문을 사용해서 이미지를 한바퀴 돈 것으로 판단 후 0번째 이미지로 이동할 수 있도록 만들고 마지막으로 setInterval()메소드를 사용해서 sliderEffect()함수를 일정한 시간 간격으로 호출합니다.