“ 지연되는 프로젝트에 인력을 더 투입하면 오히려 더 늦어진다. ”
- Frederick Philips Brooks
Mythical Man-Month 저자
JAVASCRIPT SLIDE EFFECT 웹페이지 만들기
자바스크립트로 슬라이드 유형 웹페이지를 구현해보자.
완성화면
✈00. html
<body class="img01 bg01 font01">
<header id="header">
<h1>Javascript Slide Effect01</h1>
<p>슬라이드이펙트</p>
<ul>
<li class="active"><a href="slideEffect01.html">1</a></li>
<li><a href="slideEffect02.html">2</a></li>
<li><a href="slideEffect03.html">3</a></li>
<li><a href="slideEffect04.html">4</a></li>
<li><a href="slideEffect05.html">5</a></li>
<li><a href="slideEffect06.html">6</a></li>
</ul>
</header>
<!-- //header -->
<main id="main">
<div class="slider__wrap">
<div class="slider__img">
<div class="slider"><img src="assets/img/slideEffect01-min.jpg" alt="이미지1"></div>
<div class="slider"><img src="assets/img/slideEffect02-min.jpg" alt="이미지2"></div>
<div class="slider"><img src="assets/img/slideEffect03-min.jpg" alt="이미지3"></div>
<div class="slider"><img src="assets/img/slideEffect04-min.jpg" alt="이미지4"></div>
<div class="slider"><img src="assets/img/slideEffect05-min.jpg" alt="이미지5"></div>
</div>
</div>
</main>
<!-- //main -->
<footer id="footer">
<a href="mailto:aimee00418@gmail.com">aimee00418@gmail.com</a>
</footer>
<!-- //footer -->✈00. 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 {
position: absolute;
left: 0;
top: 0;
transition: all 0.3s;
}
.slider::before {
position: absolute;
left: 5px;
top: 5px;
background-color: 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>
=>총 슬라이더의 위치를 슬라이드 한장만큼씩 옆으로 이동해 주면서 이미지를 다르게 보여주는 스크립트를 만든다
세가지 방식으로 스크립트를 적용해 보았습니다
🏳🌈00. 공통 선택자 부분
//선택자
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; //이미지 변경 간격 시간
✈01. JAVASCRIPT
<!-- //javascript -->
setInterval(() => {
//01234012340123401234 currentIndex
//12340123401234012340 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"; //첫번째 이미지를 보이게
✈02. GSAP
<!-- //GSAP -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script>
<script>
setInterval(() => {
nextIndex = (currentIndex + 1) % sliderCount;
gsap.to(slider[currentIndex],{
opacity : "0",
duration : 0.5,
ease: "elastic.out(1, 0.9)"
})
gsap.to(slider[nextIndex],{
opacity : "1",
duration : 0.5,
ease: "elastic.out(1, 0.9)"
})
}, sliderInterval);
</script>
🏴. GSAP CDN소스를 가져와 적용합니다.
https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js
✈03. 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>
setInterval(() => {
nextIndex = (currentIndex + 1) % sliderCount;
$(slider[currentIndex]).css("opacity", "0");
$(slider[nextIndex]).css("opacity", "1");
$(".slider").animate({currentIndex}, 1000, "easeInOutQuint")
currentIndex = nextIndex;
}, sliderInterval);
</script>🏴. jQuery CDN소스를 가져와 적용합니다.
https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js
https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js(애니메이션용)
🏁. setInterval()
setInterval() 함수는 일정한 시간 간격으로 특정한 작업을 반복해서 실행할 수 있도록 하는 JavaScript 내장 함수입니다.
setInterval() 함수는 두 개의 인자를 받습니다.
setInterval (( ) => { }, 시간)
첫 번째 인자는 반복해서 실행 할 함수이고, 두 번째 인자는 함수를 실행할 시간 간격(밀리초 단위)입니다. 예를 들어, 다음과 같이 함수를 1초 간격으로 실행할 수 있습니다.
setInterval(function() {
console.log('Hello, world!');
}, 1000);
🏁. CDN
CDN은 Content Delivery Network의 약어로, 콘텐츠 전송 네트워크를 의미합니다.
인터넷 상에서 다양한 위치에 위치한 서버들로부터 콘텐츠를 받아와 사용자에게 전송하는 기술입니다. 일반적으로 대규모의 웹 사이트에서 많은 양의 정적인 콘텐츠(예: 이미지, 동영상, 문서 등)를 빠르고 안정적으로 제공하기 위해 사용됩니다.
CDN은 사용자가 콘텐츠를 요청할 때, 사용자와 가장 가까운 서버에 있는 콘텐츠를 전송하므로, 콘텐츠 전송 시간을 줄여 사용자의 웹 페이지 로딩 속도를 높일 수 있습니다. 또한, 트래픽 분산을 통해 서버의 부하를 줄이고, 고가용성과 안정성을 보장할 수 있습니다.
CDN 서비스는 대부분의 경우 비용이 발생하지만, 대규모 웹 사이트나 글로벌 서비스를 제공하는 경우, 사용자 경험과 성능 개선을 위해 필수적인 기술 중 하나입니다.