Leeyanggoo
[JS] 자바스크립트로 슬라이드 만들기 1!! opacity와 transition을 이용해보자 본문
opacity와 transition을 알아보자!!
opacity 속성은 요소의 투명도를 지정하는 데 사용됩니다.
이 속성은 0~1 사이의 값을 가질 수 있으며, 0에 가까울수록 요소가 투명해지고, 1에 가까울수록 불투명해집니다.
opacity 속성은 다양한 요소에 적용될 수 있으며, 텍스트, 이미지, 배경 등에도 적용할 수 있습니다.
transition 속성은 요소의 애니메이션 효과의 지속 시간을 정하는 데 사용됩니다.
이 속성을 사용하면 요소의 상태가 변할 때 부드러운 애니메이션 효과를 적용할 수 있습니다.
transition 속성은 다양한 속성에 적용될 수 있으며, 이동, 회전, 크기 변경 등 다양한 애니메이션을 구현할 수 있습니다.
즉, opacity와 transition 속성을 이용하면 마치 레이아웃이 천천히 사라지고 나타나는 효과를 만들 수 있게 됩니다!
다양한 스크립트를 활용해보자!!
<main id="main">
<div class="slider__wrap">
<div class="slider__img">
<div class="slider"><img src="./img/sliderEffect01-min.jpg" alt="이미지1"></div>
<div class="slider"><img src="./img/sliderEffect02-min.jpg" alt="이미지2"></div>
<div class="slider"><img src="./img/sliderEffect03-min.jpg" alt="이미지3"></div>
<div class="slider"><img src="./img/sliderEffect04-min.jpg" alt="이미지4"></div>
<div class="slider"><img src="./img/sliderEffect05-min.jpg" alt="이미지5"></div>
</div>
</div>
</main>
먼저 HTML 작업으로 각 div에 이미지를 삽입하고 하나의 슬라이드로 만들었습니다.
이제 스크립트를 이용해 각 요소들이 opacity 값을 할당받도록 하면 되겠습니다.
Javascript
//선택자
const sliderWrap = document.querySelector(".slider__wrap");
const sliderImg = sliderWrap.querySelector(".slider__img");
const slider = sliderWrap.querySelectorAll(".slider");
let currentIndex = 0; //현재 보이는 이미지
let sliderCount = slider.length; //이미지 개수
let sliderInterval = 3000; //이미지 변경 간격
//슬라이드 효과
setInterval(() => {
//트랜지션 설정
slider[currentIndex].style.transition = "all, 1s";
let nextIndex = (currentIndex + 1) % sliderCount;
//전체 개수로 나누고 남은 나머지를 활용해 4(이미지 개수)를 못 넘게 함
slider[currentIndex].style.opacity = "0"
slider[nextIndex].style.opacity = "1";
currentIndex = nextIndex;
//currentIndex가 nextIndex의 값을 할당받음으로써 4를 못 넘게 함
}, sliderInterval);
각 HTML의 class를 모두 querySelector와 querySelectorAll을 이용해 선택합니다.
변수 currentIndex는 현재 보이는 이미지의 순서를 나타냅니다.
변수 sliderCount는 슬라이드의 총 개수를 나타냅니다.
변수 sliderInterval는 슬라이드가 넘어갈 간격을 나타냅니다.
setInterval() 메서드는 두 개의 인자를 가질 수 있습니다.
첫 번째 인자는 반복 실행할 콜백 함수이고, 두 번째 인자는 콜백 함수를 실행할 시간 간격(밀리초)입니다.
따라서 이번 예제에서 설정한 sliderInterval의 3000은 3초가 됩니다.
인덱스가 querySelectorAll()로 선택한 슬라이드의 총 개수를 넘어가면 안 되기 때문에 인덱스 설정을 먼저 합니다.
currentIndex가 현재 이미지의 인덱스이므로 1을 더한 값은 다음 슬라이드를 나타냅니다.
sliderCount는 슬라이드의 총 개수이므로 이를 이용해 나누면 인덱스는 배열 인덱스를 넘어서지 않게 됩니다.
따라서 querySelectorAll()을 이용해 선택한 slider의 요소는 각각 슬라이드이므로, 번갈아가면서 opacity가 0과 1이 입력되어 불투명과 투명을 번갈아가게 됩니다.
또한 전환 효과가 일어나는 슬라이드에 transition 속성을 입력하여 교체 효과가 1초 동안 일어나게 하고 있습니다.
jQuery
setInterval(()=>{
let nextIndex = (currentIndex + 1) % $(".slider").length;
$(".slider").eq(currentIndex).animate({opacity:"0"}, 1000);
$(".slider").eq(nextIndex).animate({opacity:"1"}, 1000);
//jQuery의 메서드를 쓰기 위해서는 jQuery 객체를 반환하는 $("선택자").eq(숫자) 문법을 써야 한다.
currentIndex = nextIndex;
}, sliderInterval);
jQuery는 Javascript의 querySelector()와 querySelectorAll()을 $("선택자")의 문법으로 씁니다.
자바스크립트에서 사용했던 선택자 const slider = sliderWrap.querySelectorAll(".slider")가 $(".slider")로 쓰입니다.
jQuery 객체를 배열 형태로 접근할 때 인덱스에 직접 접근하면 일반 자바스크립트 객체가 반환됩니다. 이 객체는 jQuery 객체가 아니므로 jQuery에서 제공하는 메서드를 사용할 수 없습니다.
jQuery 객체를 배열 형태로 접근하기 위해선 eq("선택자")의 문법을 사용합니다.
또한 jQuery는 animate()라는 메서드를 통해 요소의 CSS 속성을 애니메이션화하는 데 사용합니다.
여기선 opacity와 뒤의 1000밀리초를 붙여 transition 속성까지 입력하고 있음을 볼 수 있습니다!
GSAP
setInterval(() => {
let nextIndex = (currentIndex + 1) % sliderCount;
gsap.to(slider[currentIndex], {opacity: 0, duration: 1});
gsap.to(slider[nextIndex], {opacity: 1, duration : 1});
currentIndex = nextIndex;
}, sliderInterval);
GSAP(GreenSock Animation Platform)은 HTML5 애니메이션을 만드는 데 사용되는 JavaScript 라이브러리입니다. GSAP은 자바스크립트를 사용하여 요소의 위치, 크기, 회전, 투명도 등 다양한 속성을 애니메이션화하는 데 사용됩니다.
GSAP는 요소에 애니메이션을 만들고 실행하기 위해 gsap.to()라는 문법을 사용합니다.
첫 번째 인자로 애니메이션 대상 요소를 선택하고, 두 번째 인자로 애니메이션 속성들을 가진 객체를 전달합니다.
예제에선 자바스크립트의 요소 활용을 통해 opacity와 transition 효과를 위해 duration으로 애니메이션 지속 시간을 설정하고 있습니다.
