“ 지연되는 프로젝트에 인력을 더 투입하면 오히려 더 늦어진다. ”
- Frederick Philips Brooks
Mythical Man-Month 저자
JAVASCRIPT SLIDE EFFECT 웹페이지 만들기
자바스크립트로 슬라이드 유형 웹페이지를 구현해보자.
완성화면
✈00. html
<body class="img01 bg01 font01">
<header id="header">
<h1>Javascript Slide Effect02</h1>
<p>슬라이드이펙트</p>
<ul>
<li><a href="slideEffect01.html">1</a></li>
<li class="active"><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__inner">
<div class="slider"><img src="assets/img/slideEffect06-min.jpg" alt="이미지6"></div>
<div class="slider"><img src="assets/img/slideEffect07-min.jpg" alt="이미지7"></div>
<div class="slider"><img src="assets/img/slideEffect08-min.jpg" alt="이미지8"></div>
<div class="slider"><img src="assets/img/slideEffect09-min.jpg" alt="이미지9"></div>
<div class="slider"><img src="assets/img/slideEffect10-min.jpg" alt="이미지10"></div>
</div>
</div>
</div>
</main>
<!-- //main -->
<footer id="footer">
<a href="mailto:aimee00418@gmail.com">aimee00418@gmail.com</a>
</footer>
<!-- //footer -->✈00. CSS
.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: 4000px;
height: 450px;
}
.slider {
/* 개별적인 이미지 */
position: relative;
width: 800px;
height: 450px;
}
</style>- 총 슬라이더 영역 width: 4000px
- 슬라이드 하나 당 width: 800px
- 보여지는 부분을 width: 800px
=>총 슬라이더의 위치를 슬라이드 한장만큼씩 옆으로 이동해 주면서 이미지를 다르게 보여주는 스크립트를 만든다
세가지 방식으로 스크립트를 적용해 보았습니다
🏳🌈00. 공통 선택자 부분
<!--선택자 -->
<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; //이미지 변경 간격 시간
</script>
✈01. JAVASCRIPT
<!-- //javascript -->
<script>
//슬라이드마다 css를 적용해 준 스크립트
//sliderInner.style.transform = translateX("0px");
//sliderInner.style.transform = translateX("-800px");
//sliderInner.style.transform = translateX("-1600px");
//sliderInner.style.transform = translateX("-2400px");
//sliderInner.style.transform = translateX("-3600px");
//sliderInner.style.transform = translateX("0px");
//setInterval() 함수를 이용한 스크립트
sliderInner.style.transition = "all 0.6s"; //애니메이션설정
setInterval(() => {
currentIndex = (currentIndex + 1) % sliderCount;
sliderInner.style.transform = "translateX("+ -800 * currentIndex +"px)";
}, sliderInterval);
</script>- 슬라이더에 css를 적용하여 움직임을 준다.transform: translateX(" ");
- 3초마다 오른쪽으로 800px씩 움직이게 setInterval()함수를 이용하여 스크립트 작성
✈02. GSAP
<!-- //GSAP -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script>
<script>
setInterval(() => {
currentIndex = (currentIndex + 1) % sliderCount;
gsap.to(sliderInner,{
x : -800 * currentIndex,
duration : 1,
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(() => {
currentIndex = (currentIndex + 1) % $(".slider").length;
$(".slider__inner").css("position", "relative");
$(".slider").animate({left : -800 * currentIndex}, 1000, "easeInOutQuint")
console.log(currentIndex)
}, 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 서비스는 대부분의 경우 비용이 발생하지만, 대규모 웹 사이트나 글로벌 서비스를 제공하는 경우, 사용자 경험과 성능 개선을 위해 필수적인 기술 중 하나입니다.