“ 지연되는 프로젝트에 인력을 더 투입하면 오히려 더 늦어진다. ”
- Frederick Philips Brooks
Mythical Man-Month 저자
728x90
슬라이드 이펙트 03 아래에서 위로 올라오는 슬라이드 효과!
1,2번을 토대로 이번에는 아래에서 위로 올라는 슬라이드 효과를 주겠습니다!
이펙트 03번 같은 경우에는 02번의 HTML그대로 가져와서 CSS부분과 JAVASCRIT 부분을 조금씩 수정해주면 완성이 됩니다!
슬라이드 이펙트 02 보러가기
https://younajeong.tistory.com/66
슬라이드 이펙트02 - 좌에서 우로 넘어가는 이미지 슬라이드효과!
슬라이드 이펙트 02 - 왼쪽에서 오른쪽으로 넘어가는 슬라이드효과 슬라이드 이펙트 01번과 다른느낌으로 이번에는 왼쪽에서 오른쪽으로 넘어가는 슬라이드 효과를 만들어 보았습니다! 슬라이
younajeong.tistory.com
<슬라이드이펙트 03 완성본>
HTML & CSS
<!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>03. 슬라이드 이펙트</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/slider.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: 520px;
overflow: hidden;
}
/* 이미지 움직이는 영역 */
.slider__inner {
width: 800px;
height: 2900px;
}
/* 개별적인 이미지 */
.slider {
position: relative;
width: 800px;
height: 520px;
}
</style>
</head>
<!-- //header -->
<body class="img03 bg03 font03">
<header id="header">
<h1>Javascript sliderEffect03</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>
<main id="main">
<div class="slider__wrap">
<div class="slider__img">
<div class="slider__inner">
<div class="slider"><img src="./img/sliderEffect06-min.jpg" alt="이미지1"></div>
<div class="slider"><img src="./img/sliderEffect07-min.jpg" alt="이미지2"></div>
<div class="slider"><img src="./img/sliderEffect08-min.jpg" alt="이미지3"></div>
<div class="slider"><img src="./img/sliderEffect09-min.jpg" alt="이미지4"></div>
<div class="slider"><img src="./img/sliderEffect10-min.jpg" alt="이미지5"></div>
</div>
</div>
</div>
</main>
<!-- //main -->
<footer id="footer">
<a href="mailto:jeongyouna_@naver.com">jeongyouna_@naver.com</a>
</footer>
<!-- //footer -->JavaScript
<script>
//선택자
const sliderWrap = document.querySelector(".slider__wrap");
const sliderImg = sliderWrap.querySelector(".slider__img"); //보여지는 영역
const slider = sliderWrap.querySelectorAll(".slider"); //개별 이미지
const sliderInner = sliderWrap.querySelector(".slider__inner"); //움직이는 영역
let currentIndex = 0; //현재 보이는 이미지
let sliderCount = slider.length; //전체 이미지 갯수
let sliderInterval = 3000; //이미지 변경 간격 시간
</script>
<!-- javascript -->
<script>
// sliderInner.style.transform = translateY("-0px"); //-520 * 0
// sliderInner.style.transform = translateY("-520px"); //-520 * 1
// sliderInner.style.transform = translateY("-1040px"); //-520 * 2
// sliderInner.style.transform = translateY("-1560px"); //-520 * 3
// sliderInner.style.transform = translateY("-2080px"); //-520 * 4
// sliderInner.style.transform = translateY("-0px"); //-520 * 0
// sliderInner.style.transition = "all 0.6s";
// setInterval (() => {
// currentIndex = ((currentIndex +1)% sliderCount);
// sliderInner.style.transform = "translateY("+ -520 * currentIndex + "px)";
// },sliderInterval)
</script>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(".slider__inner", {
y : -520 * currentIndex,
duration : 1,
ease: "elastic.out(1, 0.3)"
})
}, sliderInterval); //3초에 한번씩 이미지가 넘어가는
</script>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__inner").animate({top : -520 * currentIndex}, 600, "easeOutElastic");
}, sliderInterval);
</script>
전체 적으로 CSS에서 slider__inner에 display flex를 삭제해줍니다. 그리고 전체적으로 higth값이 520이므로 X의 값을 구했던 것 처럼 Y의 값이 -520 * 0 , 1, 2, 3, 4, 0 이런식으로 반복이 되기 때문에 좌에서 우를 구했던 것처럼 X의 값을 Y로 바꿔 준 후 숫자를 higth값에 맞춰서 변경해 주면 됩니다. 제이쿼리에서는 left가 아닌 top을 사용하면 위에서 아래로 변하게 됩니다.