슬라이드 이펙트1 기본유형을 알아 봅시다.

JAVASCRIPT

슬라이드 이펙트1 기본유형을 알아 봅시다.

이미사용 2023. 4. 10. 19:58

명언

728x90

슬라이드 이펙트2 가로유형 보러가기

슬라이드 이펙트3 세로유형 보러가기

슬라이드 이펙트4 가로유형 (연속)보러가기

슬라이드 이펙트5 세로유형 (연속) 보러가기

슬라이드 이펙트6 버튼,닷메뉴 보러가기

슬라이드 이펙트7 버튼,썸네일 보러가기

슬라이더 이펙트1 기본유형

전체소스 보러가기

<!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>슬라이드 이펙트</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.5s;
        }
        .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="img01 bg04 font01">
    <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 -->

    <footer id="footer">
        <a href="mailto:ghkddn132@naver.com">ghkddn132@naver.com</a>
    </footer>
    <!-- footer -->

우선 html을 만들어 준후 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;}

사진들이 한곳에 겹쳐 있기 때문에 사진에 순서를 z-index를 사용하여 맞춰줍니다.

그후 자바스크립트로 갑니다.

우선 선택자와 변수를 만들어 줍니다.

        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  // nextInex
            let nextInex = (currentIndex + 1) % sliderCount;
            
            slider[currentIndex].style.opacity = "0"
            slider[nextInex].style.opacity = "1"

            currentIndex = nextInex;
            console.log(currentIndex);

            // 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"; //첫번째 이미지를 보이게

        }, sliderInterval); //3초에 한번씩

setInterval()을 사용하여 일정시간 마다 알고리즘을 이용하여 이미지가 바뀌도록 해주었습니다. 그 알고리즘을 알아보면

            let nextIndex = (currentIndex + 1) % sliderCount;
            
            slider[currentIndex].style.opacity = "0"
            slider[nextInex].style.opacity = "1"

            currentIndex = nextIndex;

알고리즘을 해석하면

다음이미지 = (현재이미지 +1) % 이미지의갯수 이고, setInterval()의 시간이 지나면

현재이미지의 opacity를 0으로 해 안보여주게 하고,

다음이미지의 opacity를 1로해 보여줍니다.

그후 현재이미지는 다음이미지의 숫자가 됩니다.

그러면

현재이미지가 0부터 시작하고 (0+1)% 5 나머지는 1이여서, 다음이미지는 1이 됩니다.

그후 현재이미지 0을 안보이게 해주고, 다음이미지 1을 보여줍니다.

그후 현재이미지 0은 다음이미지 1이됩니다.

다음은

현재 이미지가 1부터 시작하고 (1+1)% 5 나머지는 2여서, 다음이미지는 2가 됩니다.

그후 현재이미지 1을 안보이게 해주고, 다음이미지는 2를 보여줍니다.

그후 현재이미지 1은 다음이미지 2가됩니다.

이렇게 반복을 하다보면

현재이미지가 4부터 시작할때 (4+1)%5 나머지는 0이되고, 다음이미지는 0이 됩니다.

그후 현재이미지 4를 안보이게 해주고, 다음이미지 0을 보여줍니다.

그후 현재이미지 4는 다음이미지 0이 됩니다.

그렇게 무한반복을 하게됩니다.

setInterval()	JavaScript에서 사용되는 메서드로, 일정한 시간 간격으로 주어진 함수나 코드 스니펫을 반복적으로 실행하는 데 사용됩니다.
opacity	CSS 속성 중 하나로, 해당 요소의 투명도를 조절하는 역할을 합니다. 이 속성은 값의 범위가 0에서 1까지이며, 0은 완전히 투명한 상태를 의미하고, 1은 완전히 불투명한 상태를 의미합니다.

※GSAP로 표현하기

    <!-- 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,
                duration : 1
            });
            gsap.to(slider[nextIndex], {
                opacity : 1,
                duration : 1
            });

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

우선 GSAP의 라이브러리 를 불러오고

setInterval함수 를 사용하여 주기적으로 반복하게 합니다. 그후 다음이미지의 변수를 정해주는거 까지는 같습니다.
그 다음, gsap.to 함수를 사용하여 현재 슬라이더인 currentIndex를 안보이게 해주고, 다음이미지인 nextIndex 의 값을 보여주게 합니다.
마지막으로 위에서 했던 자바스크립트 처럼 currentIndex 변수를 nextIndex로 저장하여 다음 호출에서 사용할 수 있도록 합니다.

duration

GSAP (GreenSock Animation Platform) 라이브러리에서 애니메이션의 지속시간을 설정하는 속성입니다.duration 속성은 애니메이션의 시작과 끝 값 사이의 변화를 완료하는 데 소요되는 시간을 밀리초 단위로 정의합니다.

※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) % $(".slider").length;

            $(".slider").eq(currentIndex).animate({ opacity: 0 }, 500);
            $(".slider").eq(nextIndex).animate({ opacity: 1 }, 500);
        
            currentIndex = nextIndex;
            
        },sliderInterval);
    </script>

우선 jQuery의 라이브러리를 불러옵니다.

그후 setInterval함수 를 사용하여 주기적으로 반복하게 해줍니다. 그후 다음이미지의 변수를 저장해 줍니다.

$는 jQuery의 기호로, jQuery를 사용할 때 jQuery 객체를 생성할 때 사용합니다.
$를 사용하면, HTML 요소를 jQuery 객체로 변환할 수 있습니다. jQuery 객체는 jQuery 라이브러리에서 제공하는 다양한 메서드를 사용할 수 있는 객체입니다.
예를 들어, $(".slider")는 slider 클래스를 가진 모든 HTML 요소를 선택하여 jQuery 객체로 변환합니다. 이렇게 선택된 요소에 대해서는 jQuery에서 제공하는 다양한 메서드를 사용할 수 있습니다.

eq()

메서드는 jQuery에서 제공하는 메서드로, 선택한 요소 중에서 인덱스 번호에 해당하는 요소를 선택하는 역할을 합니다.

현재글슬라이드 이펙트1 기본유형을 알아 봅시다.

300x250

GIT 블로그

Loading data ...

dsda, MySQL,

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

코딩공부중인블로그