“ 지연되는 프로젝트에 인력을 더 투입하면 오히려 더 늦어진다. ”
- Frederick Philips Brooks
Mythical Man-Month 저자
안녕하세요 ヾ(≧▽≦*)o 오늘은 배경 이미지 위에 이미지를 여러장 덧대어 그 이미지가 위 아래로 움직일 수 있도록 효과를 한 번 주도록 하겠습니다.
💛 완성작입니다.
자바스크립트, GSAP, jQurey 세 가지를 이용해 같은 효과를 주도록 하겠습니다.
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: 450px;
overflow: hidden;
}
.slider__inner { /*이미지 움직이는 영역 */
/* display: flex; */
/* flex-wrap: wrap; */
width: 4000px;
height: 450px;
}
.slider { /*개별적인 이미지*/
position: relative;
width: 800px;
height: 450px;
}
</style>우선 전체 이미지를 100%로 설정해 줍니다.
그 다음 이미지를 덧대어 주는 부분을 설정해 주기 위해 위드값 800, 하이트값을 450으로 지정해 줍니다.
다음은 이미지가 위아래로 움직이게 해주기 위해서 위드값 4000, 하이트값 450을 지정해 줍니다.
마지막으로 개별적인 이미지 값을 설정해 주기 위해서 포지션 릴레이티브를 줍니다.
HTML
<main id="main">
<div class="slider__wrap">
<div class="slider__img">
<div class="slider__inner">
<div class="slider"><img src="../slide/img/slideEffect06.jpg" alt="이미지1"></div>
<div class="slider"><img src="../slide/img/slideEffect07-1.jpg" alt="이미지1"></div>
<div class="slider"><img src="../slide/img/slideEffect08-1.jpg" alt="이미지1"></div>
<div class="slider"><img src="../slide/img/slideEffect09-1.jpg" alt="이미지1"></div>
<div class="slider"><img src="../slide/img/slideEffect10-1.jpg" alt="이미지1"></div>
</div>
</div>
</div>
</main>
<!--main-->각 슬라이드에 맞는 이미지를 설정해 주기 위해 이너 안에 각각의 이미지를 5개 설정해 넣어줍니다.
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; //이미지 변경 되는 간격
sliderInner.style.transition = "all 0.6s";
setInterval(() => {
currentIndex = (currentIndex +1) % sliderCount; // 1 2 3 4 0
sliderInner.style.transform = "translateY("+ -450 * currentIndex + "px)";
}, sliderInterval);
</script>이미지가 3초마다 움직이게 하기 위해서 초기값을 3000으로 설정해주게 된다면 이미지가 3초마다 바뀌게 됩니다.
선택자를 설정해 준 뒤 let 으로 현재 보이는 이미지와 전체 이미지 갯수와 이미지 변경 되는 시간간격을 초기값으로 설정해 줍니다.
또한 자연스럽게 넘어가기 위해서 transition을 주면 이미지가 자연스럽게 넘어갑니다.
이미지가 총 5장이니 1 2 3 4 에서 다시 0으로 돌아와야 합니다.
하나씩 증가하나 sliderCount값으로 나눠 이미지가 지정된 갯수만큼 돌아가게 만들어 줍니다.
마지막으로 이미지를 아래에서 위로 슬라이드 되도록 설정해 주기 위해서 translateY로 설정하고 height값을 450으로 설정했기 때문에 -450으로 설정해 준 뒤 현재인덱스를 곱해주게 되면 자바스크립트는 끝이납니다.
GSAP
다음은 gsap를 이용해 자바스크립트와 같은 효과를 주도록 하겠습니다.
우선 gsap를 설정하기 위해선 gsap사이트에서 스크립트를 긁어와야 합니다.
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></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 : -450 * currentIndex,
duration : 1,
ease : "elastic.out(1, 0.3)"
});
}, sliderInterval);
</script>자바스크립트와 마찬가지로 setInterval로 간격을 준 뒤 현재의 인덱스에서 하나씩 커질 수 있도록 +1작업을 해준 뒤 슬라이더의 카운터 갯수와 나눠줍니다.
gsap를 사용하기 위해서 gsap.to로 지정해준 뒤 슬라이더 이너의 값이 변경돼야 하니 설정을 slider__inner로 설정한 뒤 위아래로 움직이게 하기 위해 y값으로 두고 위로 올라가게 작업해 주기 위해서 -를 붙여 -450을 해줍니다.
하나씩 전환하기 위해서 duration을 1로 설정해 준 뒤
이징 함수를 사용해 줄 것입니다.
"elastic.out(1, 0.3)"는 이러한 이징 함수 중 하나로, 탄성(elastic)처럼 튀어오르는 효과를 주면서 빠르게 시작하여 천천히 끝나는 모션을 만듭니다. "1"은 진폭(amplitude)을 나타내며, "0.3"은 주기(period)를 나타냅니다. 따라서 이 값들을 조절함으로써 모션의 강도와 빠르기를 조절할 수 있습니다.
🍔 이징 함수 ?
"ease"는 보통 값이 시간에 따라 어떻게 변화하는지를 결정하는 이징 함수(easing function) 또는 애니메이션 타이밍 함수를 나타냅니다. 🍔
jQurey
jQurey도 마찬가지로 작업해 줍니다.
jQurey를 설정하기 위해선 jQurey사이트에서 스크립트를 긁어와야 합니다.
<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>😊😊
<!-- 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 : -450 * currentIndex}, 600 , "easeOutElastic");
}, sliderInterval);
</script>jQuery는 잘 사용하지 않지만 그래도 jQuery를 이용해 작업해 줍니다.
슬라이더 이미지는 $(".slider__inner") 요소의 animate() 메소드를 사용하여 변경되며, top 속성을 사용하여 이미지를 이동시킵니다. 이때, easeOutElastic이라는 이징 함수를 사용하여 이미지 이동을 부드럽게 처리합니다.
easeOutElastic은 탄성처럼 튀어오르는 모션을 만드는 이징 함수 중 하나입니다. 이 함수는 천천히 시작하여 빠르게 끝나는 모션을 만들며, 슬라이더 이미지가 부드럽게 이동하도록 도와줍니다.
✏ 코드보기
https://github.com/leeyouna21/web2023/blob/master/javascript/slide/slideEffect03.html
GitHub - leeyouna21/web2023: 수업시간에 배운 사이트입니다.
수업시간에 배운 사이트입니다. Contribute to leeyouna21/web2023 development by creating an account on GitHub.
github.com
🥰 오늘도 감사합니다.
'javascript' 카테고리의 다른 글
| 슬라이드이펙트 첫 번째 (14) | 2023.04.10 |
|---|---|
| 슬라이드이펙트 두 번째 (14) | 2023.04.10 |
| 자바스크립트 퀴즈 사이트 만들기 7-3 (13) | 2023.04.05 |
| 자바스크립트 퀴즈 사이트 만들기 7-2 (12) | 2023.04.04 |
| 자바스크립트 퀴즈 사이트 만들기 7-1 (15) | 2023.04.04 |