728x90
🎞 슬라이드 이펙트 - 좌로 움직이기
📌 흔히 우리가 아는 슬라이드 효과입니다. 왼쪽으로 슥-슥- 지나가는 슬라이드 효과를 만들어봅시다!
슬라이드 이펙트 - 좌로 움직이기 효과 완성⭐️
HTML
전체적인 틀을 짜주는 것입니다.
<body class="img01">
<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>
<li><a href="sliderEffect07.html">7</a></li>
</ul>
</header>
<!-- header -->
<main id="main">
<section id="sliderType01">
<div class="slider__wrap">
<div class="slider__img">
<div class="slider"><img src="../assets/img/effect_bg06.jpg" alt="이미지1"></div>
<div class="slider"><img src="../assets/img/effect_bg012.jpg" alt="이미지2"></div>
<div class="slider"><img src="../assets/img/effect_bg020.jpg" alt="이미지3"></div>
<div class="slider"><img src="../assets/img/effect_bg018.jpg" alt="이미지4"></div>
<div class="slider"><img src="../assets/img/effect_bg05.jpg" alt="이미지5"></div> <!-- 슬라이드에 들어갈 이미지를 넣어줌 -->
</div>
</div>
</section>
</main>
<!-- main -->
<footer id="footer">
<div class="modal__wrap"> <!-- 화면 위에 화면창 만들어주기(부가적인 것 가능) -->
<div class="modal__btn">소스보기</div>
<div class="modal__cont">
<div class="modal__box">
<div class="title">
<span class="dot" aria-label="true"></span>
<div class="tabs">
<div class="active">
<span class="favicon" aria-label="true">
<svg width="16" height="16" viewBox="0 0 18 18" fill="none" aria-hidden="true" focusable="false">
<circle cx="9" cy="9" r="9" fill="#fff"></circle>
<path d="M18 9C18 13.9706 15.4688 3.09375 9 10.125C2.53125 17.1562 0 13.9706 0 9C0 4.02944 4.02944 0 9 0C13.9706 0 18 4.02944 18 9Z" fill="orange"></path>
<path d="M18 9C18 13.9706 14.9062 0.84375 8.29688 6.1875C1.6875 11.5312 0 13.9706 0 9C0 4.02944 4.02944 0 9 0C13.9706 0 18 4.02944 18 9Z" fill="yellow"></path>
</svg>
</span>
<em>JAVASCRIPT</em>
<span class="close">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true" focusable="false">
<path d="M12.5 3.5L3.5 12.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M12.5 12.5L3.5 3.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</span>
</div>
<div>
<span class="favicon" aria-label="true">
<svg width="16" height="16" viewBox="0 0 18 18" fill="none" aria-hidden="true" focusable="false">
<circle cx="9" cy="9" r="9" fill="#fff"></circle>
<path d="M18 9C18 13.9706 15.4688 3.09375 9 10.125C2.53125 17.1562 0 13.9706 0 9C0 4.02944 4.02944 0 9 0C13.9706 0 18 4.02944 18 9Z" fill="orange"></path>
<path d="M18 9C18 13.9706 14.9062 0.84375 8.29688 6.1875C1.6875 11.5312 0 13.9706 0 9C0 4.02944 4.02944 0 9 0C13.9706 0 18 4.02944 18 9Z" fill="yellow"></path>
</svg>
</span>
<em>HTML</em>
<span class="close">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true" focusable="false">
<path d="M12.5 3.5L3.5 12.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M12.5 12.5L3.5 3.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</span>
</div>
<div>
<span class="favicon" aria-label="true">
<svg width="16" height="16" viewBox="0 0 18 18" fill="none" aria-hidden="true" focusable="false">
<circle cx="9" cy="9" r="9" fill="#fff"></circle>
<path d="M18 9C18 13.9706 15.4688 3.09375 9 10.125C2.53125 17.1562 0 13.9706 0 9C0 4.02944 4.02944 0 9 0C13.9706 0 18 4.02944 18 9Z" fill="orange"></path>
<path d="M18 9C18 13.9706 14.9062 0.84375 8.29688 6.1875C1.6875 11.5312 0 13.9706 0 9C0 4.02944 4.02944 0 9 0C13.9706 0 18 4.02944 18 9Z" fill="yellow"></path>
</svg>
</span>
<em>CSS</em>
<span class="close">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true" focusable="false">
<path d="M12.5 3.5L3.5 12.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M12.5 12.5L3.5 3.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</span>
</div>
</div>
<span class="plus">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true" focusable="false">
<path d="M2.5 8H13.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M8 2.5V13.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</span>
</div> <!-- 새로운 창 구조 정해주기 (밑에는 pre, code태그를 이용해 안에 들어갈 내용을 써주면 됨(생략함)) -->
<!-- 창 닫기 구현 -->
<div class="modal__close">
<span class="close">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true" focusable="false">
<path d="M12.5 3.5L3.5 12.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M12.5 12.5L3.5 3.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</span>
</div>
</div>
</div>
CSS
부분적인 CSS입니다. 미디어쿼리도 사용했습니다.
전체적인 CSS를 보시려면 위 CSS보기를 참고해주세요!
/* slider */
.slider__wrap {
width: 100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
/* slider__img : 이미지 보이는 영역*/
.slider__img {
position: relative;
width: 800px;
height: 450px;
/* 나머지 이미지 가리기 */
overflow: hidden;
}
/* slide__inner : 이미지를 감싸고 있는 부모 : 움직이는 부분 */
.slider__inner {
display: flex;
flex-wrap: wrap;
width: 4000px; /*위에를 써주고 이걸 써주어야 가로로 정렬됨*/
height: 450px;
/* position: relative; 제이쿼리 썼을 때 이미지 넘겨지게 설정->제이쿼리에서 따로 설정해줌 */
}
/* slider : 개별적인 이미지 */
.slider {
position: relative;
width: 800px;
height: 450px;
}
.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;}
@media (max-width: 800px){
.slider__img {
width: 400px;
height: 250px;
}
#header h1{
line-height: 1.2;
}
}
▶ 자바스크립트 활용 (공통) : 설명은 주석을 참고해주세요!
📌 방법 1 : 자바스크립트
const sliderWrap = document.querySelector(".slider__wrap");
const sliderImg= document.querySelector(".slider__img"); //보여지는 영역
const sliderInner = document.querySelector(".slider__inner"); //움직이는 영역
const slider = document.querySelectorAll(".slider"); //이미지
let currentIndex = 0; //현재 이미지
let sliderCount = slider.length; //이미지 갯수
//사진넘어가기 부드럽게
sliderInner.style.transition = "all 0.6s"
//슬라이드 움직임 계산
//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
//슬라이드 움직이기
//setInterval : 함수는 어떤 코드를 일정한 시간 간격을 두고 반복해서 실행하고 싶을 때 사용
setInterval(() => {
//currentIndex++;
//이미지 수가 어떻든 그거에 맞게 슬라이드 움직이게 하는 방법
//01.
currentIndex = (currentIndex + 1) % 5; //12340123401234...
//02.
// if(currentIndex < 4){
// currentIndex++;
// } else {
// currentIndex = 0;
// }
//삼항연산자로 써주면...
//(currentIndex < 4) ? currentIndex++ : currentIndex = 0
console.log(currentIndex);
// let nextIndex = (currentIndex + 1) % sliderCount; //다음 이미지
//1, 2, 3, 4, 5, 6, 7, 8, 9,...
//나머지 : 1, 2, 3, 4, 0, 1, 2, 3, 4, 0...
// sliderInner.style.transform += "translateX(-100px)"; //= : 동작X += : 움직임
sliderInner.style.transform = "translateX("+ -800 * currentIndex +"px)"; //transform으로 움직임 주니깐 +=해제해야함
}, 1000);
요약
const sliderInner = document.querySelector(".slider__inner");
const slider = document.querySelectorAll(".slider");
let currentIndex = 0;
sliderInner.style.transition = "all 0.6s"
setInterval(()=>{
currentIndex = (currentIndex + 1) % slider.length;
sliderInner.style.transform = "translateX("+ -800 * currentIndex +"px)";
}, 2000);
📌 방법 2 : GSAP
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.0/gsap.min.js"></script>
<script>
const slider = document.querySelectorAll(".slider");
let currentIndex = 0;
//let sliderCount = slider.length;
setInterval(() => {
currentIndex = (currentIndex + 1) % ".slider".length;
//to 선택자 document.write 안써도 인식함
//밑에와 같은 구조로 써줄 것
gsap.to(".slider__inner", {
//duration : 0.6,
x : -800 * currentIndex, //객체 스타일 구조
});
}, 2000);
</script>
📌 방법 3 : jQeury
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
let currentIndex = 0;
setInterval(() => {
currentIndex = (currentIndex + 1) % $(".slider").length;
//$() = document.querySelector 간략화
//css에 써주지 않고 제이쿼리 안에서 쓰는 법
$(".slider__inner").css("position", "relative");
$(".slider__inner").animate({ left: -800 * currentIndex }, 600);
// transform : "translateX("+ -800 * currentIndex +")"
}, 2000);
</script>
'Effect(자바스크립트 활용) > Slider Effect 슬라이드이펙트' 카테고리의 다른 글
| "슬라이더이펙트 06" : 이미지 슬라이드(버튼, 닷메뉴, 무한) (1) | 2022.10.21 |
|---|---|
| "슬라이더이펙트 05" : 이미지 슬라이드(버튼, 닷메뉴) (0) | 2022.10.17 |
| "슬라이더이펙트 04" : 좌우로 움직이기(버튼을 이용하여) (11) | 2022.09.19 |
| "슬라이더이펙트 03" : 좌로 움직이기(연속) (2) | 2022.09.02 |
| "슬라이더이펙트 01" : 트랜지션 효과 (4) | 2022.08.30 |
댓글