728x90
반응형
슬라이드 이펙트4 가로유형 (연속)
슬라이드 이펙트2의 가로유형처럼 다시돌아가는것이 아닌 자연스럽게 슬라이드 되게 하였습니다.
전체소스 보러가기
<!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: 450px;
overflow: hidden;
}
.slider__inner { /* 이미지 움직이는 영역 */
display: flex;
flex-wrap: wrap;
width: 4800px; /*총이미지4800복사까지*/
height: 450px;
}
.slider { /* 개별적인 이미지 */
position: relative;
width: 800px;
height: 450px;
}
</style>
</head>
<body class="img03 bg02 font06">
<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/sliderEffect06-min.jpg" alt="이미지1"></div>
<div class="slider s2"><img src="./img/sliderEffect07-min.jpg" alt="이미지2"></div>
<div class="slider s3"><img src="./img/sliderEffect08-min.jpg" alt="이미지3"></div>
<div class="slider s4"><img src="./img/sliderEffect09-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:ghkddn132@naver.com">ghkddn132@naver.com</a>
</footer>.slider__inner 의 width 값을 첫번째의 이미지를 복사하여 나온거 까지 포함하여 4800으로 해줍니다.
※JAVASCRIPT
<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 = 3000; //이미지 변경 간격 시간
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);변수에 이미지 하나의 width값을 저장하기 위해 offsetWidth을 사용해 width값을 저장하였습니다.
그리고 첫번째 이미지를 복사하기위해 sliderInner.firstElementChild.cloneNode(true);를 사용하여 이미지를 복사한후 그값을 반환 하였습니다.
·sliderInner.appendChild(sliderClone);이용해 복사한 첫번째 이미지를 마지막에 붙여 넣었습니다.
·함수를 만들어 currentIndex++ 를 해주고 sliderInner에 이미지의 애니메이션을 적용 시간과 가로 축으로 얼마나 이동할지를 정해준뒤 조건문을 써서 currentIndex와 sliderCount가 같아 졌을때 실행하도록 합니다.
·setTimeout()을 사용하여 애니메이션 적용시간과 가로축을 0px로 되돌려 처음에 있던 사진으로 돌아가게 해줍니다.
그러면 이미지가 다지나간후에 이미지가 눈에 보이지 않게 빠르게 처음 이미지로 바뀌게 됩니다.
그후 currentIndex 는 다시 0 되어 반복을 하게 됩니다.
그후 setInterval(sliderEffect,sliderInterval);사용해 정해준 시간에 맞춰서 sliderEffect가 적용 되게 해줍니다.
| offsetWidth | 요소의 너비를 픽셀 단위로 반환하는 속성입니다. 이 속성은 요소의 패딩, 테두리 및 스크롤 막대를 포함한 전체 너비를 반환합니다 |
| firstElementChild | 요소의 첫 번째 자식 요소를 반환하는 속성입니다. 이 속성은 텍스트 노드를 제외한 요소 노드만 반환합니다. |
| appendChild() | 지정된 부모 노드의 자식 노드 목록의 마지막에 새로운 노드를 추가하는 역할을 합니다. |
| cloneNode() | DOM 요소의 복사본을 생성하는 메서드입니다.인수로 false를 전달하면 요소의 얕은 복사본을 생성하고, 인수로 true를 전달하면 깊은 복사본을 생성합니다. |
| setTimeout() | 함수는 일정 시간이 경과한 후에 콜백 함수를 호출하는 함수입니다. 첫 번째 인수는 실행할 콜백 함수이고, 두 번째 인수는 콜백 함수를 실행하기 전까지의 지연 시간(밀리초 단위)입니다. |
※GSAP이용하기
<!-- GSAP -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js" ></script>
<script>
//복사한 첫번째 이미지 마지막에 붙여넣기
sliderInner.appendChild(sliderClone);
function sliderEffect(){
currentIndex++;
TweenMax.to(sliderInner, {
x : -sliderwidth * currentIndex,
duration : 0.6,
});
//마지막 이미지에 위치 했을 떄
if(currentIndex == sliderCount){
setTimeout(() => {
gsap.to(".slider__inner", {
x : "0",
duration : 0,
});
},700);
currentIndex = 0;
}
}
setInterval(sliderEffect,sliderInterval);
</script>우선 GSAP 의 라이브러리를 가져옵니다.
그후 TweenMax.to() 함수를 사용하여 슬라이더를 애니메이션화합니다. x 속성을 사용하여 translateX 대신 transform 속성을 변경하고, transition 대신 duration을 사용하여 슬라이더가 마지막 이미지에 위치할 경우 위치를 초기화합니다.
| TweenMax.to() | 요소의 속성을 변화시키는 애니메이션 효과를 만들어 줍니다. |
| duration | 애니메이션의 지속시간을 나타내는 속성으로, 초 단위로 설정합니다. 값이 작을수록 빠르게, 클수록 느리게 애니메이션이 실행됩니다. 이 속성은 TweenMax.to() 메서드의 두 번째 인수로 전달됩니다. |
※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>
sliderInner.appendChild(sliderClone);
function sliderEffect(){
currentIndex++;
$(".slider__inner").css({
transition: "all 0.6s",
transform: "translateX(-" + sliderwidth * currentIndex + "px)"
});
//마지막 이미지에 위치 했을 떄
if(currentIndex == sliderCount){
setTimeout(() => {
$(".slider__inner").css({
transition: "0s",
transform: "translateX(0px)"
});
},700);
currentIndex = 0;
}
}
setInterval(sliderEffect,sliderInterval);
</script>우선 jQuery의 라이브 러리를 가져옵니다.
그후 css를 적용하는곳에 $를 이용해 적용할 곳을 직접 가져온후
.css를 쓰고 그안에 transition과 transform를 변경해 줍니다.