슬라이드 이펙트 : 트랜지션 효과

코딩 공부/JAVASCRIPT

슬라이드 이펙트 : 트랜지션 효과

천서리 2023. 4. 10. 12:53

QUOTE THE DAY

“ 당신이 6개월 이상 한 번도 보지 않은 코드는 다른 사람이 다시 만드는 게 훨씬 더 나을 수 있다. ”

- 이글슨 (Eagleson)

슬라이드이펙트란?

웹 사이트나 애플리케이션에서 이미지나 콘텐츠를 슬라이딩하여 화면에 전환하는 효과를 의미합니다. 슬라이드 이펙트는 다양한 형태로 표현될 수 있으며, 주로 이미지 갤러리, 배너, 광고 등에서 사용됩니다.

슬라이드 이펙트는 사용자가 웹 페이지를 더욱 동적으로 느끼게 하고, 시각적인 흥미를 유발하여 사용자 경험을 향상시키는 효과를 가지고 있습니다. 또한, 슬라이드 이펙트는 화면 전환 시 부드러운 애니메이션을 제공하여 사용자가 불편함을 느끼지 않도록 도와줍니다.

주로 사용되는 슬라이드 이펙트에는 수평 슬라이드, 수직 슬라이드, 페이드 인/아웃, 카드 슬라이드, 돌리기, 점진적 슬라이드 등이 있습니다. 이러한 슬라이드 이펙트는 CSS와 JavaScript를 사용하여 구현할 수 있으며, 라이브러리나 프레임워크를 사용하여 더욱 쉽고 간편하게 구현할 수도 있습니다.

슬라이드 이펙트 사이트 코드

<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>01. 슬라이드 이펙트</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 {
            position: absolute;
            left: 0;
            top: 0;
            transition: all 0.3s;
        }
        .slider::before {
            position: absolute;
            left: 5px;
            top: 5px;
            background: rgba(0, 0, 0, 0.4);
            color: #fff;
            padding: 5px 10px;
        }
        .slider:nth-child(1)::before {content: '이미지1';}
        .slider:nth-child(2)::before {content: '이미지2';}
        .slider:nth-child(3)::before {content: '이미지3';}
        .slider:nth-child(4)::before {content: '이미지4';}
        .slider:nth-child(5)::before {content: '이미지5';}
        .slider:nth-child(1) {z-index: 5;}
        .slider:nth-child(2) {z-index: 4;}
        .slider:nth-child(3) {z-index: 3;}
        .slider:nth-child(4) {z-index: 2;}
        .slider:nth-child(5) {z-index: 1;}
    </style>
</head>
<body class="img03 bg01 font11">
    <header id="header">
        <h1>Javascript Slider Effect01</h1>
        <p>슬라이드 이펙트 : 트랜지션 효과</p>
        <ul>
            <li class="active"><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><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"><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>
    <!-- //main -->

#main 안에 .slider__wrap 안에 .slider__Img를 만들어서 이미지를 설정해주고, 그에 맞는 css를 설정해주었습니다.

.slider:nth-child(1)::before {content: '이미지1';}
.slider:nth-child(2)::before {content: '이미지2';}
.slider:nth-child(3)::before {content: '이미지3';}
.slider:nth-child(4)::before {content: '이미지4';}
.slider:nth-child(5)::before {content: '이미지5';}
.slider:nth-child(1) {z-index: 5;}
.slider:nth-child(2) {z-index: 4;}
.slider:nth-child(3) {z-index: 3;}
.slider:nth-child(4) {z-index: 2;}
.slider:nth-child(5) {z-index: 1;}

::before 의사 요소는 각 슬라이더 요소 앞에 콘텐츠를 추가하여 각 이미지의 레이블을 표시합니다. content 속성을 사용하여 표시될 텍스트를 설정합니다.

z-index 속성은 슬라이더 요소를 서로 겹치게 배치하는 데 사용됩니다. 첫 번째 이미지는 가장 높은 z-index 값을 가지고 마지막 이미지는 가장 낮은 값을 가집니다. 이렇게하면 이미지를 슬라이딩하는 효과가 만들어집니다.

script 코드

<script>
    //선택자
    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(() => {
        // 0 1 2 3 4 0 1 2 3 4 0 1 2 3 4 0  // currentIndex
        // 1 2 3 4 0 1 2 3 4 0 1 2 3 4 0 1  // nextIndex
        let nextIndex = (currentIndex + 1) % sliderCount;

        slider[currentIndex].style.opacity = "0";   // 이미지를 안보이게
        slider[nextIndex].style.opacity = "1";  // 이미지를 보이게

        currentIndex = nextIndex;

    }, sliderInterval);


    // slider[0].style.opacity = "0";  //첫번째 이미지를 안보이게
    // slider[1].style.opacity = "1";  //두번째 이미지를 보이게

    // slider[1].style.opacity = "0";  //두번째 이미지를 안보이게
    // slider[2].style.opacity = "1";  //세번째 이미지를 보이게

    // slider[2].style.opacity = "0";  //세번째 이미지를 안보이게
    // slider[3].style.opacity = "1";  //네번째 이미지를 보이게

    // slider[3].style.opacity = "0";  //네번째 이미지를 안보이게
    // slider[4].style.opacity = "1";  //다섯번째 이미지를 보이게

    // slider[4].style.opacity = "0";  //다섯번째 이미지를 안보이게
    // slider[0].style.opacity = "1";  //첫번째 이미지를 보이게
</script>

 //선택자
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;          //이미지 변경 간격 시간

currentIndex 변수는 현재 보이는 이미지의 인덱스를 나타냅니다.

sliderCount 변수는 이미지의 총 개수를 나타냅니다.

sliderInterval 변수는 이미지가 변경되는 간격 시간을 밀리초 단위로 설정합니다.

setInterval(() => {
    // 0 1 2 3 4 0 1 2 3 4 0 1 2 3 4 0  // currentIndex
    // 1 2 3 4 0 1 2 3 4 0 1 2 3 4 0 1  // nextIndex
    let nextIndex = (currentIndex + 1) % sliderCount;

    slider[currentIndex].style.opacity = "0";   // 이미지를 안보이게
    slider[nextIndex].style.opacity = "1";  // 이미지를 보이게

    currentIndex = nextIndex;

}, sliderInterval);

setInterval() 함수를 사용하여 주기적으로 이미지를 변경합니다.

콜백 함수 내부에서는 nextIndex 변수를 계산하여 다음 이미지의 인덱스를 결정합니다.

현재 이미지는 slider[currentIndex]로 선택하고, 다음 이미지는 slider[nextIndex]로 선택합니다.

slider[currentIndex].style.opacity와 slider[nextIndex].style.opacity는 CSS opacity 속성을 사용하여 현재 이미지를 안 보이게하고 다음 이미지를 보이게 합니다.

마지막으로, currentIndex를 nextIndex로 업데이트하여 다음 이미지가 다음 번에 표시되도록 합니다.

위 과정을 GSAP, jQuery로도 작성할 수 있습니다.

GSAP

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script>
<script>
    setInterval(() => {
        let nextIndex = (currentIndex + 1) % sliderCount;

        gsap.to(slider[currentIndex], {
            opacity: 0,   // fade out the current slide
            duration: 0.5,
        });

        gsap.to(slider[nextIndex], {
            opacity: 1,   // fade in the next slide
            duration: 0.5,
        });

        currentIndex = nextIndex;
    }, sliderInterval);
</script>

setInterval 함수는 주기적으로 실행되는 함수를 구현할 수 있는 함수이며, 이를 이용하여 이미지 슬라이더를 구현합니다.

이전 이미지를 사라지게 하고, 다음 이미지를 나타나게 하기 위해, 현재 이미지와 다음 이미지에 대한 인덱스를 계산합니다.

다음 이미지에 대한 인덱스는 (currentIndex + 1) % sliderCount 로 계산됩니다.

이렇게 계산한 다음 이미지 인덱스를 이용하여 현재 이미지를 opacity: 0 으로 fade out 하고, 다음 이미지를 opacity: 1 으로 fade in 하는 애니메이션을 GSAP 라이브러리의 gsap.to 메소드를 사용하여 구현합니다.

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(()=>{
        let nextIndex = (currentIndex + 1) % sliderCount;
        $(".slider").eq(currentIndex).animate({ opacity: 0 },1000);
        $(".slider").eq(nextIndex).animate({ opacity: 1 },1000);
        currentIndex = nextIndex;
    },sliderInterval);
</script>

우선 jQuery와 jQuery UI를 가져옵니다. 그 다음에는 setInterval 함수를 사용하여 이미지 슬라이더가 일정한 시간 간격으로 변경되도록 합니다.

nextIndex 변수는 현재 인덱스(currentIndex)에서 1을 더한 값에서 슬라이더의 갯수(sliderCount)를 나눈 나머지 값으로 계산됩니다. 이를 통해 현재 슬라이더의 다음 슬라이더의 인덱스를 계산합니다.

그 후에는 eq() 메서드를 사용하여 현재 인덱스와 다음 인덱스에 해당하는 슬라이더에 접근하고, animate() 메서드를 사용하여 해당 슬라이더의 투명도를 변경합니다. animate() 메서드의 첫 번째 매개변수로는 슬라이더에 적용할 CSS 속성을 객체 형태로 전달하고, 두 번째 매개변수로는 애니메이션의 지속시간을 밀리초 단위로 전달합니다.

마지막으로 currentIndex 변수를 nextIndex로 업데이트합니다. 이를 통해 이미지 슬라이더가 순환되도록 합니다.

현재글슬라이드 이펙트 : 트랜지션 효과

GIT 블로그

Loading data ...

오서방닭개장, function, 코딩, 안산순두부짬뽕, 매개변수 함수, 텍스트유형, xor연산, 시흥순두부맛집, javascript, HTML, mysql, 함수, jabascript, 카드 유형, 리턴 함수, 자바스크립트, 이미지텍스트유형, 선언적함수, 마우스이펙트, or연산,

Today :
Yesterday :

일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

SEOLHEE