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>01. 슬라이드 이펙트</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 {
position: absolute;
left: 0;
top: 0;
transition: 0.3s all;
}
.slider::before {
position: absolute;
left: 5px;
top: 5px;
background: rgba(0, 0, 0, 0.4);
color: #fff;
padding: 5px 10px;
}
.slider:nth-child(1)::before {content: '이미지1';}
.slider:nth-child(2)::before {content: '이미지2';}
.slider:nth-child(3)::before {content: '이미지3';}
.slider:nth-child(4)::before {content: '이미지4';}
.slider:nth-child(5)::before {content: '이미지5';}
.slider:nth-child(1) {z-index: 5;}
.slider:nth-child(2) {z-index: 4;}
.slider:nth-child(3) {z-index: 3;}
.slider:nth-child(4) {z-index: 2;}
.slider:nth-child(5) {z-index: 1;}
</style>
</head>
<body class="img01 bg01 font01">
<header id="header">
<h1>Javascript slider Effect01</h1>
<p>슬라이드 이펙트</p>
<ul>
<li class="active"><a href="sliderEffect01.html">1</a></li>
<li><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>
<!-- //header -->
<main id="main">
<div class="slider__wrap">
<div class="slider__img">
<div class="slider"><img src="./img/sliderEffect01-min.jpg" alt="이미지1"></div>
<div class="slider"><img src="./img/sliderEffect02-min.jpg" alt="이미지2"></div>
<div class="slider"><img src="./img/sliderEffect03-min.jpg" alt="이미지3"></div>
<div class="slider"><img src="./img/sliderEffect04-min.jpg" alt="이미지4"></div>
<div class="slider"><img src="./img/sliderEffect05-min.jpg" alt="이미지5"></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는 유형별로 공통으로 사용될 스타일은 파일로 따로 만들어서 링크 태그를 사용해 가지고 와서 입력해주고 유형별로 다르게 사용될 스타일은 각각의 코드 구성하는데 입력해줍니다.
- style 구역으로 이동해서 첫번째 이미지, 두번째 이미지, 세번째 이미지, 네번째 이미지, 다섯번째 이미지 순서대로 나오게 하기 위해 nth-child(n)을 사용해서 z-index 값을 차례대로 입력해줍니다.
CSS
- CSS1은 이전에 사용했던 마우스 이펙트에 포함되어있는 것을 그대로 사용하기 위해 가져왔습니다.(https://dongjin6539.tistory.com/45, https://dongjin6539.tistory.com/46, https://dongjin6539.tistory.com/47)
- 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 slider = sliderWrap.querySelectorAll(".slider");
let currentIndex = 0; // 현재 보이는 이미지
let sliderCount = slider.length; // 이미지 갯수
let sliderInterval = 3000; // 이미지 변경 간격 시간
setInterval(() => {
// 0 1 2 3 4 0 1 2 3 4 0 1 2 3 4 0 currentIndex
// 1 2 3 4 0 1 2 3 4 0 1 2 3 4 0 1 nextIndex
let nextIndex = (currentIndex + 1) % sliderCount;
slider[currentIndex].style.opacity = "0";
slider[nextIndex].style.opacity = "1";
currentIndex = nextIndex;
}, sliderInterval);
// // 첫번째 이미지를 안보이게, 두번째 이미지를 보이게
// slider[0].style.opacity = "0";
// slider[1].style.opacity = "1";
// // 두번째 이미지를 안보이게, 세번째 이미지를 보이게
// slider[1].style.opacity = "0";
// slider[2].style.opacity = "1";
// // 세번째 이미지를 안보이게, 네번째 이미지를 보이게
// slider[2].style.opacity = "0";
// slider[3].style.opacity = "1";
// // 네번째 이미지를 안보이게, 다섯번째 이미지를 보이게
// slider[3].style.opacity = "0";
// slider[4].style.opacity = "1";
// // 다섯번째 이미지를 안보이게, 첫번째 이미지를 보이게
// slider[4].style.opacity = "0";
// slider[0].style.opacity = "1";
</script>자바스크립트 구성
- 각각 필요한 부분의 태그를 선택자로 만들어줍니다.
- 변수를 추가로 저장해줍니다. 현재 보이는 이미지를 currentIndex로 0을 저장해주고, 이미지의 갯수는 sliderCount로 이미지 부부분을 선택자로 만들어둔 slider를 사용해서 slider.length를 저장해주고, 이미지 변경 경과 시간을 sliderInterval로 3000(3초)를 저장해줍니다.
- 먼저 주석 처리되어있는 곳을 보면 첫번째 이미지를 가지고 오려면 배열의 데이터를 불러오는 형식으로 slider[0]으로 불러와줍니다. 그럼 두번째 이미지 slider[1]. 세번째 이미지 slider[2], 네번째 이미지 slider[3], 다섯번째 이미지 slider[4]로 입력해줍니다.
- 바로 스타일을 주기 위해 각각 slider[ ].style.opacity = " "을 입력해줍니다.
- opacity는 불투명도를 나타냅니다.
- 그래서 위와 같이 예시로 첫번째 이미지를 안보이게 하고, 두번째 이미지를 보이게 하려면 slider[0].style.opacity="0", slider[1].style.opacity="1"을 입력해주면 됩니다.
- 하나씩 다 입력할 순 없으니 setInterval 함수를 사용해서 입력해줍니다.
- 이미지의 배열의 데이터를 위와 같이 주석 처리한 값으로 나오게 하려면 일단 먼저 nextIndex로 변수를 저장해주는데 currentIndex의 처음 데이터가 0이므로 +1을 해주고 이미지 전체 갯수 sliderCount로 나눈 나머지 값을 저장하게 해줍니다. 그러면 nextIndex의 데이터는 1이 됩니다.
- 그 다음은 currentIndex의 데이터가 1로 저장되게끔 1을 가지고 있는 nextIndex가 있으므로 currentIndex=nextIndex;로 입력해줍니다.
- 그럼 값은 나왔으므로 예시로 적었던 부분을 사용해서 slider[currentIndex].style.opacity="0";, slider[nextIndex].style.opacity="1";을 입력해주면 됩니다.
GSAP, jQuery
GSAP
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script>
<script>
// 선택자
const sliderWrap = document.querySelector(".slider__wrap");
const sliderImg = sliderWrap.querySelector(".slider__img");
const slider = sliderWrap.querySelectorAll(".slider");
let currentIndex = 0; // 현재 보이는 이미지
let sliderCount = slider.length; // 이미지 갯수
let sliderInterval = 3000; // 이미지 변경 간격 시간
setInterval(() => {
let nextIndex = (currentIndex + 1) % sliderCount;
gsap.to(slider[currentIndex], {
opacity: "0"
});
gsap.to(slider[nextIndex], {
opacity: "1"
});
currentIndex = nextIndex;
},sliderInterval);
</script>GSAP 구성
- JAVASCRIPT와 구성은 비슷합니다.
- 먼저 GSAP의 cdn링크를 홈페이지를 통해 가지고 와줍니다.(https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js)
- setInterval 함수 안에만 좀 다릅니다.
- 함수 안에 필요한 변수 nextIndex의 값은 똑같이 구해줍니다.
- gsap 라이브러리를 사용하기 위해서는 .to( )를 사용해서 해야합니다.
- ( )안에는 slider 이미지 선택자와 배열로 데이터를 가져오는 방법을 사용해서 값을 가진 변수 currentIndex와 변수 nextIndex의 값을 입력해줍니다.
- 두개의 데이터가 필요하므로 각각 gsap.to(slider[currentIndex], {opacity:"0"});, gsap.to(slider[nextIndex], {opacity:"1"});을 입력해줍니다.
- 추가로 nextIndex의 값이 위의 변수 nextIndex의 식에 변수 currentIndex로 저장되게끔 해주기 위해 currentIndex=nextIndex;를 입력해줍니다.
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 slider = sliderWrap.querySelectorAll(".slider");
let currentIndex = 0; // 현재 보이는 이미지
let sliderCount = slider.length; // 이미지 갯수
let sliderInterval = 3000; // 이미지 변경 간격 시간
setInterval(() => {
let nextIndex = (currentIndex + 1) % $(".slider").length;
$(slider[currentIndex]).animate({opacity: 0}, 600);
$(slider[nextIndex]).animate({opacity: 1}, 600);
currentIndex = nextIndex;
}, sliderInterval);
</script>jQuery 구성
- JAVASCRIPT와 구성은 비슷합니다.
- 먼저 jQuery의 링크를 홈페이지를 통해 가지고 와줍니다.(https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js)
- setInterval 함수 안에만 좀 다릅니다.
- 함수 안에 필요한 변수 nextIndex의 값은 똑같이 구해줍니다.
- jQuery는 선택자를 따로 만들지 않고 간단하게 입력이 가능합니다. $(".클래스명")
- jQuery는 animate를 사용해서 opacity 불투명도 속성을 사용해서 값을 입력시킬 수 있습니다.
- 두개의 데이터가 필요하므로 각각 $(slider[currentIndex]).animate({opacity:"0"});, $(slider[nextIndex].animate({opacity:"1"});을 입력해줍니다.
- 추가로 nextIndex의 값이 위의 변수 nextIndex의 식에 변수 currentIndex로 저장되게끔 해주기 위해 currentIndex=nextIndex;를 입력해줍니다.
참고
- 속성, 메서드
| 속성, 메서드 | 설명 |
| setInterval( ) | 각 호출 사이에 고정된 시간 지연으로 함수를 반복적으로 호출하거나 코드 스니펫을 실행합니다. |
| opacity |
요소의 불투명도를 설정합니다. 불투명도는 요소 뒤의 콘텐츠가 숨겨지는 정도이며 투명도의 반대입니다. |
GSAP
jQuery
728x90
반응형
