“ 지연되는 프로젝트에 인력을 더 투입하면 오히려 더 늦어진다. ”
- Frederick Philips Brooks
Mythical Man-Month 저자
728x90
슬라이드 이펙트 05 - 아래에서 위로 연속적으로 움직이는 효과!
저번 시간에 이어서 슬라이드가 아래에서 위로 연속적으로 움직일 수 있는 효과를 만들어 보았습니다!
저번에 만들었던 3번 효과를 참고하여서 함께 만들어 보도록 하겠습니다!
https://younajeong.tistory.com/67
슬라이드 이펙트 03 - 아래에서 위로 올라오는 슬라이드 효과!
슬라이드 이펙트 03 아래에서 위로 올라오는 슬라이드 효과! 1,2번을 토대로 이번에는 아래에서 위로 올라는 슬라이드 효과를 주겠습니다! 이펙트 03번 같은 경우에는 02번의 HTML그대로 가져와서 C
younajeong.tistory.com
<완성된 이미지>
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>04. 슬라이드 이펙트</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="img05 bg05 font05">
<header id="header">
<h1>Javascript sliderEffect05</h1>
<p>슬라이드 이펙트 : 아래에서 위로 움직이기(연속적)</p>
<ul>
<li><a href="sliderEffect01.html">1</a></li>
<li><a href="sliderEffect02.html">2</a></li>
<li><a href="sliderEffect03.html">3</a></li>
<li><a href="sliderEffect04.html">4</a></li>
<li class="active"><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 s1"><img src="./img/sliderEffect03-min.jpg" alt="이미지1"></div>
<div class="slider s2"><img src="./img/sliderEffect06-min.jpg" alt="이미지2"></div>
<div class="slider s3"><img src="./img/sliderEffect09-min.jpg" alt="이미지3"></div>
<div class="slider s4"><img src="./img/sliderEffect10-min.jpg" alt="이미지4"></div>
<div class="slider s5"><img src="./img/sliderEffect02-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 -->
<script>HTML & CSS
전체적으로 4번과 형태가 비슷하지만 우리는 아래에서 위로 올라오게끔 해야하니 이번에는 widht값이 아닌 heigth에 값을 부여해야 하므로 CSS에서 widht값은 통일하고 inner에 heigth값을 더한 값을 부여해줍니다. 또한 wrap에만 flex속성을 주어서 이미지를 가운데 오게 끔 정렬해 줍니다.
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 sliderHeight = slider[0].offsetHeight //이미지 높이 값
let sldierClone = sliderInner.firstElementChild.cloneNode(true); //첫번째 이미지 복사 : 첫번째 이미지를 복사해서 붙여준다.
let sliderInterval = 3000; //이미지 변경 간격 시간
//복사한 첫번째 이미지 마지막에 붙여넣기
sliderInner.appendChild(sldierClone);
function sliderEffect() {
currentIndex++;
// sliderInner.style.transition = "all 0.6s";
// sliderInner.style.transform = "translateX(-"+ sliderWidth * currentIndex +" px)";
sliderInner.style.transition = "all 0.6s";
sliderInner.style.transform = `translateY(-${sliderHeight * currentIndex}px)`;
//마지막 이미지에 위치 했을 때
if(currentIndex == sliderCount) {
setTimeout(() => {
sliderInner.style.transition = "0s";
sliderInner.style.transform = "translateY(0px)"
},700);
currentIndex = 0;
}
}
setInterval(sliderEffect, sliderInterval);
</script>javascript
- 4번에서 했던 선택자와 변수를 그대로 모두 할당해 줍니다.
- sliderEffect함수를 선언합니다. 이 함수는 currentIndex 값을 1씩 증가시키면서, sliderInner요소를 translateY()함수를 사용하여 이동시키는 역할을 합니다.
- setinterval 함수를 사용하여 sliderEffect함수를 일정 간격으로 반복 실행 합니다. 이 간격은 sliderIntervla변수에 지정한 값으로 설정됩니다.
- currentIndex값이 sliderCount값과 같아지면, setTimeout함수를 사용하여서 trnasition속성을 0으로 설정하여 움직임이 부자연스럽게 보이지 않도록 설정해 줍니다. 그리고 currentIndex값을 0으로 다시 설정해 줍니다.
- 그러면 이미지가 다시 0번째로 돌아가는 부분에 있어서 자연스럽게 연속적으로 넘어갈 수 있는 효과가 완성됩니다.
GSAP
<!-- GSAP -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>
<script>
const sliderTween = gsap.to(sliderInner, {
y: () => -sliderHeight * currentIndex,
ease: "power1.inOut",
duration: 0.6,
paused: true
});
function sliderEffect() {
currentIndex++;
if (currentIndex === sliderCount) {
sliderTween.eventCallback("onComplete", () => {
sliderInner.style.transition = "none";
sliderInner.style.transform = "translateY(0px)";
currentIndex = 0;
});
}
sliderTween.play();
}
setInterval(sliderEffect, sliderInterval);
</script>gsap
gsap 로드를 사용해서 gsap로 코드를 변경해서 실행해 보았습니다. TweenMax.to()메서드를 사용하여 슬라이드 이미지를 이동시켰습니다. sliderInner요소의 y 속성 값을 변경하여 이미지가 위로 슬라이딩 되도록합니다. 이때 currentIndex변수를 상요하여 현재 위치한 이미지의 인덱스를 추적하게 합니다.
마지막 이미지가 도달하면 슬라이드를 처음으로 되돌리는데 TweenMax.set()메서드를 사용하여 sliderInner요소의 y속성 값을 0으로 초기화 합니다. setinterval()메서드를 사용하여 sliderEffect함수를 일정한 간격으로 호출할 수 있습니다.
TweenMax.to()
GSAP라이브러리에서 제공하는 메서드 중 하나로, CSS속성값을 설정할 수 있습니다. 주어진 요소에 대한 CSS스타일을 즉시 설정하거나, 요소를 숨기거나, 위치를 이동하거나, 크기를 조정할 수 있습니다. 이 메서드를 사용하면 자연스럽고 부드러운 애니메이션 효과를 적용할 수 있습니다.
이 메서드는 TweenMax.to() 또는 TweenMax.from()등 다른 메서드와 함께 사용하여 시작 종료 속성간의 값을 설정할 수 있습니다.
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>
$(document).ready(function() {
const sliderWrap = $(".slider__wrap");
const sliderImg = $(".slider__img");
const slider = $(".slider");
const sliderInner = $(".slider__inner");
let currentIndex = 0;
let sliderCount = slider.length;
let sliderHeight = slider.first().height();
let sldierClone = sliderInner.children().first().clone(true);
let sliderInterval = 3000;
sliderInner.append(sldierClone);
function sliderEffect() {
currentIndex++;
sliderInner.css({ "transition": "all 0.6s", "transform": "translateY(-" + sliderHeight * currentIndex + "px)" });
if (currentIndex == sliderCount) {
setTimeout(function() {
sliderInner.css({ "transition": "0s", "transform": "translateY(0px)" });
}, 700);
currentIndex = 0;
}
}
setInterval(sliderEffect, sliderInterval);
});
</script>jquery
- 제이쿼리 라이브러리를 사용해 줍니다.
- jquery선택자를 사용해 DOM요소들을 서택합니다. `$()`안에 CSS선택자를 넣어서 해당 요소를 선택할 수 있게끔 만들어 주고 선택된 요소들은 변수에 할당합니다.
- jquery의 append()메서드를 사용해서 sliderClone변수에 저장된 이미지를 sliderInner요소의 마지막 자식 요소로 추가합니다.
- sliderEffect()함수 내부의 코드가 변경되며 animate()메서드를 사용해서 sliderInner요소를 이동시키는 효과를 구현합니다.
- animate()메서드에 객체를 전달하여 top속성 값을 변경합니다. top속성 값이 변경되면서 이미지가 위쪽으로 이동하는 효과를 구현할 수 있습니다.
- 애니메이션 효과과 완료될 때마다 콜백함수가 호출 되면서 콜백 함수 내부에서 현재 이미지가 마지막 이미지에 도달한 경우 top 속성값을 0으로 초기화 시켜줍니다.
- setINterval()함수는 이전의 코드와 동일합니다.