728x90
반응형
슬라이드 이펙트 : 좌로 연속으로 움직이기
수업 시간에 배운 내용을 복습하면서 해보겠습니다.
코드 보기(HTML, JAVASCRIPT / CSS1 / CSS2) / 완성화면
코드 블럭
<!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">
<!-- 파비콘 -->
<link rel="shortcut icon" type="image/x-icon" href="ico/favicon.png"/>
<link rel="apple-touch-icon" sizes="114x114" href="ico/favicon.png"/>
<link rel="apple-touch-icon" href="ico/favicon.png"/>
<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="img04 bg04 font04">
<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="이미지6"></div>
<div class="slider s2"><img src="./img/sliderEffect07-min.jpg" alt="이미지7"></div>
<div class="slider s3"><img src="./img/sliderEffect08-min.jpg" alt="이미지8"></div>
<div class="slider s4"><img src="./img/sliderEffect09-min.jpg" alt="이미지9"></div>
<div class="slider s5"><img src="./img/sliderEffect10-min.jpg" alt="이미지10"></div>
</div>
</div>
</div>
</main>
<!-- //main -->
<footer id="footer">
<a href="mailto:dongjin6539@naver.com">dongjin6539@naver.com</a>
</footer>
<!-- //footer -->
</body>
</html>구성
- 코드는 간단하게 header 구역 부분에 제목 태그, 목록 태그를 사용해서 텍스트를 입력해줍니다.
- main 구역에는 이미지 태그를 사용해 각각 이미지를 입력해줍니다.
- css는 유형별로 공통으로 사용될 스타일은 파일로 따로 만들어서 링크 태그를 사용해 가지고 와서 입력해주고 유형별로 다르게 사용될 스타일은 각각의 코드 구성하는데 입력해줍니다.
- 첫번째 이미지를 다섯번째 이미지 다음으로 복사해서 이미지를 6개를 만들겁니다. 그래서 이미지 구역의 총 width 값은 800*6이므로 class "slider__inner"의 width 값을 4800px로 입력해줍니다.
- 스타일이 해당되는 부분을 제외하고 나머지는 사라지게 하기 위해서 overflow:hidden;을 입력해줍니다.
CSS
- CSS1 참고(https://github.com/dongjin6539/web2023/blob/main/javascript/slider/css/reset.css)
- CSS2 참고 (https://github.com/dongjin6539/web2023/blob/main/javascript/slider/css/slider.css)
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 = 2000; // 이미지 변경 간격 시간
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);
</script>자바스크립트 구성
- 각각 필요한 부분의 태그를 선택자로 만들어줍니다.
- 변수를 추가로 저장해줍니다. 현재 보이는 이미지를 currentIndex로 0을 저장해주고, 이미지의 갯수는 sliderCount로 이미지 부부분을 선택자로 만들어둔 slider를 사용해서 slider.length를 저장해주고, 이미지 변경 경과 시간을 sliderInterval로 2000(2초)를 저장해주고, 이미지의 가로값을 sliderWidth로 slider[0].offsetWidth로 값을 저장해주고, 변수 sliderClone를 만들어서 선택자 sliderInner의 안에 첫번째 이미지를 복사시켜줍니다.
- 복사한 첫번째 이미지를 마지막 이미지에 붙여넣기 위해 appendChild를 사용해서 붙여줍니다.
- 함수 sliderEffect를 사용해서 함수 식 안에 선택자 sliderInner에 스타일을 직접 입력해주면서 transition 속성과 transform 속성(가로로 이동이므로 translateX)을 입력해줍니다.
- 그리고 마지막 이미지가 나타났을 때를 표현하기 위해 if문을 사용해줍니다.
- if문 안에는 setTimeout을 사용해서 다시 첫번째 이미지로 순식간에 지나가게 하기 위해 선택자 sliderInner에 스타일을 직접 입력해주면서 transition 속성과 transform 속성을 모두 0으로 입력해주고 현재 보이는 이미지 변수 currentIndex의 데이터를 0으로 변경시켜줍니다.
- setInterval 함수를 사용해서 함수 sliderEffect를 실행시키고 sliderInterval 시간을 입력해줍니다.
GSAP, jQuery
GSAP
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script><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 sliderClone = sliderInner.firstElementChild.cloneNode(true); // 첫번째 이미지 복사
// 복사한 첫번째 이미지 마지막에 붙여넣기
sliderInner.appendChild(sliderClone);
function sliderEffect(){
currentIndex++;
gsap.to(".slider__inner", {
x : -sliderWidth * currentIndex
});
// 마지막 이미지에 위치 했을 때
if(currentIndex == sliderCount){
setTimeout(() => {
gsap.set(".slider__inner", {
x : 0
})
}, 700);
currentIndex = 0;
};
};
setInterval(sliderEffect, sliderInterval);
</script>GSAP 구성
- JAVASCRIPT와 구성은 비슷합니다.
- 먼저 GSAP의 cdn링크를 홈페이지를 통해 가지고 와줍니다.(https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js)
- JAVASCRIPT에서 사용했던 함수 그대로 사용해줍니다. 스타일을 입력했던 부분만 수정해줍니다.
- gsap 라이브러리를 사용하기 위해서는 .to( )를 사용해서 해야합니다.
- ( )안에는 선택자 변수를 입력하거나 클래스명을 가지고 와서 입력해주면 됩니다.
- gsap 라이브러리는 transform: translateX를 간단하게 x로 표시가 가능합니다.
- 변수로 이미지의 width의 값을 sliderWidth로 저장해주었기 때문에 사용해서 입력해줍니다.
- 그리고 마지막 이미지가 나타났을 때를 표현하기 위해 if문을 사용해줍니다.
- if문 안에는 setTimeout을 사용해서 다시 첫번째 이미지로 순식간에 지나가게 하는 것을 즉시 실행시켜주기 위해 gsap.to( )가 아닌 gsap.set( )를 사용해줍니다.
- 그리고 x의 값을 0으로 입력해줍니다. 현재 보이는 이미지 변수 currentIndex의 데이터를 0으로 변경시켜줍니다.
- setInterval 함수를 사용해서 함수 sliderEffect를 실행시키고 sliderInterval 시간을 입력해줍니다.
jQuery
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></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 sliderClone = sliderInner.firstElementChild.cloneNode(true); // 첫번째 이미지 복사
// 복사한 첫번째 이미지 마지막에 붙여넣기
sliderInner.appendChild(sliderClone);
function sliderEffect(){
currentIndex++;
$(".slider__inner").css("position", "relative");
$(".slider__inner").animate({left : -sliderWidth * currentIndex});
// 마지막 이미지에 위치 했을 때
if(currentIndex == sliderCount){
setTimeout(() => {
$(".slider__inner").css("position", "relative");
$(".slider__inner").animate({left : 0}, 0);
}, 700);
currentIndex = 0;
}
};
setInterval(sliderEffect, sliderInterval);
</script>jQuery 구성
- JAVASCRIPT와 구성은 비슷합니다.
- 먼저 jQuery의 링크를 홈페이지를 통해 가지고 와줍니다.(https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js)
- JAVASCRIPT와 살짝 다른 점은 선택자를 $( )를 사용해서 불러옵니다.
- 그리고 JAVASCRIPT에서는 스타일을 직접 입력하려면 선택자.style.속성 = 값;을 입력했다면 jQuery는 $(선택자).css({속성 : 값});을 입력해줍니다.
참고
GSAP
- https://greensock.com/gsap/
- 속성, 메서드
| 속성, 메서드 | 설명 |
| gsap.to( ) | gsap의 가장 일반적인 유형의 애니메이션입니다. |
| gsap.set( ) | 속성을 즉시 설정합니다. |
jQuery
속성, 메서드
| 속성, 메서드 | 설명 |
| offsetWidth | 요소의 가로 값(border/padding 값 포함) |
| firstElementChild | 요소의 첫 번째 자식을 반환하거나 Element자식 null요소가 없는 경우 반환합니다. |
| appendChild | 한 노드를 특정 부모 노드의 자식 노드 리스트 중 마지막 자식으로 붙입니다. |
| cloneNode | 이 메서드를 호출한 Node 의 복제된 Node를 반환합니다. |
728x90
반응형
