- Frederick Philips Brooks
Mythical Man-Month 저자
728x90
반응형
완성된 화면 입니다.
HTML 화면입니다.
<!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">
<meta name="view-transition" content="same-origin">
<title>03. 슬라이드 이펙트</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/slider.css">
<!-- GSAP -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js"></script>
</head>
<body class="img01 bg01 font10">
<header id="header">
<h1>Javascript slider Effect03</h1>
<p>슬라이드 이펙트 - 상하 움직이기</p>
<ul>
<li><a href="sliderEffect01.html">1</a></li>
<li><a href="sliderEffect02.html">2</a></li>
<li class="active"><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_inner">
<div class="slider"><img src="./img/sliderEffect06-1-min.jpg" alt="이미지1"></div>
<div class="slider"><img src="./img/sliderEffect07-1-min.jpg" alt="이미지1"></div>
<div class="slider"><img src="./img/sliderEffect08-1-min.jpg" alt="이미지1"></div>
<div class="slider"><img src="./img/sliderEffect09-min.jpg" alt="이미지1"></div>
<div class="slider"><img src="./img/sliderEffect10-1-min.jpg" alt="이미지1"></div>
</div>
</div>
</div>
</main>
<!-- main -->
<footer id="footer">
<a href="mailto:ture403@gmail.com">ture403@gmail.com</a>
</footer>
</body>css 코드입니다.
/* silder_wrap */
.slider_wrap {
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.slider_img { /* 이미지가 보이는 영역 */
position: relative;
width: 800px;
height: 520px;
overflow: hidden;
}
.slider_inner { /* 전체 이미지를 감싸고 있는 부모박스 : 움직이는 영역 */
width: 800px;
height: 2900px;
}
.slider { /* 개별적인 이미지 */
position: relative;
width: 800px;
height: 520px;
}
JS코드입니다.
<!-- javascript -->
<script>
sliderInner.style.transition = "all 0.6s";
setInterval(()=>{
currentIndex = ((currentIndex +1) % sliderCount);
// console.log(currentIndex);
sliderInner.style.transform = "translateY("+ -520 * currentIndex +"px)";
},sliderInterval)
</script>
<!--GSAP -->
<script>
setInterval(()=>{
currentIndex = (currentIndex +1) % sliderCount;
gsap.to(".slider_inner", {
y : -520 * currentIndex,
duration : 1,
ease : "elastic.out(1, 0.3)"
})
},sliderInterval);
</script>
<!-- jquery -->
<script>
setInterval(() => {
currentIndex = (currentIndex +1) % $(".slider").length;
$(".slider_inner").css("position", "relative");
$(".slider_inner").animate({top : -520 * currentIndex}, 1000, "easeOutElastic");
}, sliderInterval);
</script>
javascript
- 이번에는 이미지를 가로로 해서 슬라이드를 하는 유형입니다.
- 먼저 css에서 display:felx를 주고 넓이 높이값을 설정했습니다.
- 그리고 나머지 영역을 overflow:hidden 으로 감추게 했습니다.
- 그리고 let 변수를 설정 전에와 같이 설정을 했습니다.
- currentIndex = ((currentIndex +1) % sliderCount)는 나머지값을 하면 반복되서 변수에 저장됩니다.
- sliderInner.style.transform = "translateY("+ -520 * currentIndex +"px)은 --520px에다가 currentIndex 를 곱하면 이제 자동으로 넘어가지게 됩니다.
GASP
- GSAP로 하면 더 간단하게 작업이 가능합니다. 먼저 CDN을 가져와서 붙입니다.
- 그리고 currentIndex = ((currentIndex +1) % sliderCount)이거는 전역변수로 저장했기때문에 쓸겁니다.
- 그리고 gasp.to로 시작해서 안에 먼저 class값을 적어줍니다. 그다음 대괄호 안에 x라고 씁니다. y는 trasnlateY와 같습니다.
- 그안에 값을 적어주면 이제 동작이 됩니다. ease 는 이제 효과를 주는 메서드 입니다.
제이쿼리
- 제이쿼리는 지금은 잘 쓰이지 않고 있는데 그래도 현직에는 많이 남아있어서 쓰임새를 알려고 작성했습니다.
- currentIndex = (currentIndex +1) % $(".slider").length의 코드를 보면 $()안에 바로 클래스명을 쓰면 선언을 굳이 안해도 됩니다.
- 그다음에 제이쿼리는 transform을 못씁니다. 너무 옛날이라 적용을 안했습니다. 그래서 먼저 부모박스에 posiotn:reaive를 주고 left 값을 줘서 슬라이드 효과를 주었습니다.