...
728x90
반응형
TranslateX의 값으로 슬라이드 효과 만들기
이번에는 translateX의 값을 조절하여 이미지가 좌로 넘어가는 효과를 만들어보겠습니다.
HTML 작성하기
<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>
변경된 HTML 알아보기
- main의 구조만 살짝 바뀌었는데, 각각의 이미지 전체를 감싸고 있는 slider__inner를 추가했습니다.
CSS 작성하기
/* 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;
}
변경된 CSS 알아보기
- slide__inner에 display:flex 속성을 부여해 모든 사진이 가로로 정렬되도록 만들었습니다.
- slide의 position을 relative로 바꾸어주었습니다.
Javascript 작성하기 (javascript 사용)
// 선택자
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; // 이미지 변경 간격
sliderInner.style.transition = "all 0.6s"
setInterval(() => {
currentIndex = (currentIndex + 1) % sliderCount;
sliderInner.style.transform = "translateX(" + -800 * currentIndex + "px)";
}, sliderInterval);
javascript 정리해보기
- 선택자로는 slider__inner의 선택자만 하나 더 추가했습니다.
- currentIndex에 (currentIndex + 1) % sliderCount의 값을 저장해줍니다.
- sliderInner에 style transform 을 translateX( -800 * currentIndex )px 만큼 이동하도록 합니다.
- 이 과정을 sliderInterval 간격으로 반복합니다.
Javascript 작성하기 (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(sliderInner, {
x : -800 * currentIndex,
duration : 1,
ease : "elastic.out(1, 0.8)"
});
}, sliderInterval)
</script>
javascript 정리해보기
- 선택자는 위와 동일하게 사용합니다. (코드블럭에는 생략)
- gsap의 홈페이지에서 cdn을 가져와 적어줍니다.
- 같은 방법으로 setInterval 함수를 사용합니다.
- gsap.to(sliderInner, (혹은 ".slider__inner" 사용가능) 에
- {x : -800 * currentIndex (x 축 -800 * currentIndex만큼 이동) 의 속성을 부여합니다.
- duration은 움직이는 시간을 나타냅니다.
- ease 에는 움직임의 효과를 적어줍니다. }
- 이 과정을 sliderInterval 간격으로 반복합니다.
Javascript 작성하기 (jQuery사용)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/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>
javascript 정리해보기
- gsap와 동일하게 jquery 홈페이지에서 cdn을 가져와 적어줍니다.
- jquery에서는 $(".slider")로 표기 가능합니다.
- jquery에서는 translateX 속성이 없기 때문에 position의 값을 left로 이동시켜줍니다.
이상으로 세 가지 방법의 스크립트로 만들어 보았습니다.
728x90
반응형