“ 지연되는 프로젝트에 인력을 더 투입하면 오히려 더 늦어진다. ”
- Frederick Philips Brooks
Mythical Man-Month 저자
728x90
슬라이드 이펙트 02 - 왼쪽에서 오른쪽으로 넘어가는 슬라이드효과
슬라이드 이펙트 01번과 다른느낌으로 이번에는 왼쪽에서 오른쪽으로 넘어가는 슬라이드 효과를 만들어 보았습니다!
슬라이드 이펙트01 참고하기
https://younajeong.tistory.com/65
슬라이드 이펙트 01 - 이미지를 하나씩 보이는 트렌지션 효과를 줬어요!
슬라이드 이펙트 01 : 트렌지션 효과 이미지 여러장을 하나씩 보일 수 있는 트렌지션 효과를 만들어 봤습니다! reset /* reset */ @import url('https://webfontworld.github.io/hallym/Hallym.css'); @import url('https://webfon
younajeong.tistory.com
<슬라이드 이펙트 02 완성본>
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>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>
<!-- //header -->
<body class="img02 bg02 font02">
<header id="header">
<h1>Javascript sliderEffect02</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>
<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="이미지1"></div>
<div class="slider"><img src="./img/sliderEffect07-min.jpg" alt="이미지2"></div>
<div class="slider"><img src="./img/sliderEffect08-min.jpg" alt="이미지3"></div>
<div class="slider"><img src="./img/sliderEffect09-min.jpg" alt="이미지4"></div>
<div class="slider"><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
저번 슬라이드 이펙트01 과 다른 점은 HTML 에서 slider__img 안에 slider__inner를 넣어 주었습니다.
왼쪽에서 슬라이드가 이동하기 위해서는 각 이미지를 감싸고 있는 div가 필요하기 떄문에 class명을 slider__inner라고 부여해주어서
이미지들을 감싸 주었습니다.
CSS
- CSS를 살펴보면 Wrap을 전체 영역으로 감쌀 수 있게 width값과 height값을 %와 vh로 속성을 주었습니다.
- 이미지가 보이는 영역으로 slider__img와 이미지가 움직이는 영역 slider__inner 그리고 개별적인 이미지 slider에 각 속성을 주었습니다.
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 sliderInterval = 3000; //이미지 변경 간격 시간
</script>
<!-- javascript -->
<!-- <script> -->
// // 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
// console.log(currentIndex)
// sliderInner.style.transform = "translateX("+ -800 * currentIndex + "px)";
// },sliderInterval);
<!-- </script> -->javascript
- 먼저 sliderWrap에 선택자를 주었습니다. 그리고 차례대로 Img와 Inner Slider를 주었는데 Slider는 5개의 이미지가 있으므로 querySelectorAll을 써서 선택해 줍니다.
- 그리고 변수 let을 선언해서 현재 보이는 이미지, 전체 이미지 갯수, 이미지 변경 시간 간격을 설정해줍니다.
- 이제 왼쪽에서 움직이기 위해 sliderInner에 스타일 속성을 부여해서 transform으로 움직이는데 X축으로 처음 이미지가 -0px을 움직이고 그 다음에는 이미지의 width값인 800px 그리고 세번째 이미지가 1600 이런식으로 되는데 여기서 규칙을 찾아보면 -800 * 0 , 1, 2, 3, 4, 0, 1, 2, 3, 4, 라는 규칙을 슬라이드01 에서 발견한것 같이 발견할 수 있습니다.
- 그러면 setInterval 을 사용해서 발견한 규칙에 맞는 스크립트를 만들어 줍니다.
- 현재보이는 이미지(currentIndex) = (현재 보이는이미지 + 1) % 전체 갯수 를 나눠준다면 1,2,3,4,0,1,2,3,4 ...계속 이렇게 나오게 될것입니다.
- 전체 SliderInnerr값에 style.transform을 사용해서 translateX 의 값을 + -800 * currentIndex + px 를 해주게 된다면 좌측으로 움직이는 효과가 나타나는 슬라이드 효과를 만들어 낼 수 있습니다.
GSAP
//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); //3초에 한번씩 이미지가 넘어가는
</script>gsap
gsap는 먼저 로드값을 가져와서 실행시켜야 합니다.
javascript와 똑같이 setintervla을 작성 한 후 그 안에 gsap.to를 사용해서 선택자를 안에 넣어주고
trnaslateX를 x라고 써줘서 -800 * currentIndex값을 써서 현재 보이는 이미지의 인덱스 값과 8을 곱해줌으로 다음 이미지가 나올 수 있게끔 해줍니다. 그리고 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>jQuery
제이쿼리 역시 로드를 가져와서 이용해 주는데 선택자를 $로 표시해서 선택자를 선택 한후 거기에 css를 바로 입힐 수 있게 만들 어줍니다.
제이쿼리는trnaslateX 효과를 줄 수 없어서 animation을 가져와서 x의 좌표가 들어가는 곳에 left로 설정 한 후 효과를 줄 수 있는 로드를 한번더 가지고 와서 animate에 효과를 줄 수 있습니다.