728x90
반응형
슬라이드 이펙트2 가로유형
전체 소스 보러가기
<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__inner { /* 이미지 움직이는 영역 */
display: flex;
flex-wrap: wrap;
width: 4000px;
height: 450px;
}
.slider { /* 개별적인 이미지 */
position: relative;
width: 800px;
height: 450px;
}
</style>
</head>
<body class="img01 bg04 font02">
<header id="header">
<h1>Javascript Slider Effect02</h1>
<p>슬라이드 이펙트 : 좌로 움직이기</p>
<ul>
<li><a href="sliderEffect01.html">1</a></li>
<li class="active"><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>
</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-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:ghkddn132@naver.com">ghkddn132@naver.com</a>
</footer>
<!-- footer -->우선 사진을 가로로 정렬 해주어야 하기 때문에 display: flex;를 사용해 이미지를 가로로 해줍니다.
그리고 overflow: hidden;을 이용해 잘리는 이미지는 안보이게 해줍니다.
※JAVASCRIPT
<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>
<!-- javascript -->
<script>
// sliderInner.style.transform = translateX("0px");
// sliderInner.style.transform = translateX("-800px");
// sliderInner.style.transform = translateX("-1600px");
// sliderInner.style.transform = translateX("-2400px");
// sliderInner.style.transform = translateX("-3200px");
// sliderInner.style.transform = translateX("0px");
// // 트랜지션 설정
// sliderInner.style.transition = "all 0.6s";
// setInterval(() => {
// currentIndex = (currentIndex + 1) % sliderCount; // 1 2 3 4 0 1 2 3 4 0
// sliderInner.style.transform = "translateX("+ -800 * currentIndex + "px)";
// },sliderInterval);기본 유형에서 사용한 것과 같이 setInterval함수를 쓰고 sliderInterval의 주기만큼 반복 하도록 하게 하였습니다.
이제것을 이용해 가로로 되어있지만 overflow: hidden로 인해 보이지 않는 이미지를 보이게 하기위해 transform을 이용하여 "translateX("+ -800 * currentIndex + "px)" 값만큼 가로로 움직이게 해줍니다. 그 움직인 가로의 값에 있는 이미지를 보여줍니다.
| transform | 요소의 위치, 크기, 회전 등을 변경하는 데 사용되는 CSS 속성입니다. |
| translateX | transform 속성 중 하나로, X축 방향으로 요소를 이동시키는 함수입니다. |
※ 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(".slider__inner", {
x : -800 * currentIndex ,
duration : 1,
ease: "elastic.out(1, 0.3)"
});
},sliderInterval)
</script>GSAP를 사용하기위해 라이브러리를 가져오고
정해준 시간주기로 반복하고 변수를 변경하는 거까지는 같습니다.
GSAP를 사용하기위해 to 함수를 사용하고 .slider__inner 클래스를 가진 요소의 x의 속성값을 -800 * currentIndex 만큼 움직이고 그곳에 있는 이미지를 보여줍니다.
| duration | 애니메이션의 실행 시간을 설정하는데 사용되는 옵션입니다. 해당 속성의 값은 초 단위로 설정됩니다. |
| ease | 애니메이션 등에서 사용되어 움직임을 자연스럽게 만들기 위해 시간에 따라 값을 변화시키는 함수입니다. |
| elastic.out(1, 0.3) | 탄성을 모방하여 움직임을 부드럽게 만드는데 사용됩니다. "elastic.out"은 탄성의 반동을 나타내고, 괄호 안에 있는 매개변수는 다음과 같습니다: 첫 번째 매개변수 (1)는 애니메이션이 끝나는 시간입니다. 이 값은 1로 설정되어 있으므로, 애니메이션이 1초 동안 진행됩니다. 두 번째 매개변수 (0.3)는 반동이 얼마나 강한지를 나타냅니다. 이 값이 작을수록 반동이 약해지고, 값이 클수록 반동이 강해집니다 |
※ 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__inner").animate({left : -800 * currentIndex}, 600, "easeOutElastic");
},sliderInterval);
</script>jQuery를 사용하기위해 라이브러리를 가져오고
정해준 시간주기로 반복하고 변수를 변경하는거 까지는 같습니다. jQuery를 사용할때는 $를 사용합니다.
그후 slider__inner의 position을 relative로 하여 해당 요소를 애니메이션 효과로 이동시켜주게 합니다.
animate()를 이용해 .slider__inner에 애니메이션효과를 600의 주기마다 left로 -800만큼 이동하게 만들어줍니다. 이동한 곳에는 다른 사진이 보이게 됩니다.
| animate | jQuery의 메서드 중 하나로, HTML 요소를 애니메이션화하는 데 사용됩니다. 이 메서드는 CSS 속성 값들을 변경하여 요소를 움직이는 애니메이션을 만들어 줍니다. |
| easeOutElastic | 애니메이션에서 사용되는 Easing Function 중 하나입니다. 이 함수는 탄성을 모방하여 움직임을 부드럽게 만드는데 사용됩니다. 움직이거나, 변화하는 CSS 속성을 설정하고, 애니메이션 지속 시간과 easing 함수를 지정하여 요소를 애니메이션화합니다. |