Animated Turtle

Javascript

슬라이드 효과 만들기(transition)

훙구 2023. 4. 10. 13:09

...

728x90
반응형

Transition 으로 슬라이드 효과 주기

이미지의 opacity를 조절하여 이미지 슬라이드 효과를 주도록 하겠습니다.

 

HTML 작성하기

<!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>01. 슬라이드 이펙트</title>

    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/slider.css">
</head>
<body class="img01 bg01 seoulhangang">
    <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:gnsrbdi@naver.com">gnsrdbi@naver.com</a>
    </footer>
    <!-- footer -->
</body>
</html>

HTML 정리해보기

  • 이 전에 작성했던 마우스 효과의 기본적인 틀을 가져와 main의 구조만 변경하였습니다.
  • main에는 슬라이드 효과를 받을 이미지를 다섯장 넣어주었습니다.

CSS 작성하기

@import url('https://webfontworld.github.io/NexonFootballGothic/NexonFootballGothic.css');
@import url('https://webfontworld.github.io/NexonLv1Gothic/NexonLv1Gothic.css');
@import url('https://webfontworld.github.io/PyeongChang/PyeongChang.css');
@import url('https://webfontworld.github.io/busan/Busan.css');
@import url('https://webfontworld.github.io/neodgm/NeoDunggeunmo.css');
@import url('https://webfontworld.github.io/mapo/MapoDPP.css');
@import url('https://webfontworld.github.io/sandbox/SBAggro.css');
@import url('https://webfontworld.github.io/seoulhangang/SeoulHangang.css');
@import url('https://webfontworld.github.io/Cafe24Danjunghae/Cafe24Danjunghae.css');

/* reset */
* {
    margin: 0;
    padding: 0;
}

*, *::before, *::after {
    box-sizing: border-box;
}

a {
    text-decoration: none;
    color: #222;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: normal;
}

li, ul, ol {
    list-style: none;
}

img {
    vertical-align: top;
    width: 100%;
}

em {
    font-style: normal;
}

.nexonfootball {
    font-family: NexonFootballGothic;
}

.nexon {
    font-family: NexonLv1Gothic;
}

.pyeonchang {
    font-family: PyeongChang;
}

.busan {
    font-family: Busan;
}

.neodungguenmo {
    font-family: NeoDunggeunmo;
}

.Mapodpp {
    font-family: MapoDPP;
}

.aggro {
    font-family: SBAggro;
}

.seoulhangang {
    font-family: SeoulHangang;
}

.danjunghae {
    font-family: Cafe24Danjunghae;
}

body {
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background-position: center center;
    background-size: cover;
    color: #fff;
}
body.img01 {
    background-image: url(../img/sliderEffect01-min.jpg);
}
body.img02 {
    background-image: url(../img/sliderEffect02-min.jpg);
}
body.img03 {
    background-image: url(../img/sliderEffect03-min.jpg);
}
body.img04 {
    background-image: url(../img/sliderEffect04-min.jpg);
}
body.img05 {
    background-image: url(../img/sliderEffect05-min.jpg);
}
body.img06 {
    background-image: url(../img/sliderEffect06-min.jpg);
}
body.img07 {
    background-image: url(../img/sliderEffect07-min.jpg);
}
body.img08 {
    background-image: url(../img/sliderEffect08-min.jpg);
}
body.img09 {
    background-image: url(../img/sliderEffect09-min.jpg);
}
body.img10 {
    background-image: url(../img/sliderEffect10-min.jpg);
}
body::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100vh;
    z-index: -1;
}
body.bg01::after {
    background-color: rgba(43, 61, 58, 0.67);
}
body.bg02::after {
    background-color: rgba(81, 92, 70, 0.67);
}
body.bg03::after {
    background-color: rgba(21, 21, 41, 0.96);
}
body.bg04::after {
    background-color: rgba(34, 72, 90, 0.67);
}
body.bg05::after {
    background-color: rgba(27, 58, 34, 0.67);
}
body.bg06::after {
    background-color: rgba(58, 29, 29, 0.67);
}
body.bg07::after {
    background-color: rgba(47, 49, 14, 0.67);
}
body.bg08::after {
    background-color: rgba(56, 32, 58, 0.67);
}
body.bg09::after {
    background-color: rgba(19, 56, 61, 0.67);
}
body.bg10::after {
    background-color: rgba(85, 78, 45, 0.67);
}
/* header */
#header {
    position: absolute;
    left: 50%;
    top: 20px;
    transform: translateX(-50%);
    text-align: center;
}

#header h1 {
    margin-bottom: 0.3em;
}

#header ul {
    margin-top: 0.6em;
}

#header li {
    display: inline-block;
}

#header li a {
    color: #fff;
    border: 1px solid #fff;
    width: 30px;
    height: 30px;
    line-height: 30px;
    display: inline-block;
    border-radius: 30%;
    transition: all 0.2s;
}

#header li a:hover {
    background-color: #fff;
    color: #000;
}

#header li.active a {
    background-color: #fff;
    color: #000;
}

/* footer */
#footer {
    position: absolute;
    left: 50%;
    bottom: 20px;
    transform: translateX(-50%);
}

#footer a {
    color: #fff;
    font-size: 14px;
}

#footer a:hover {
    text-decoration: underline;
}
/* 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-color: 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;}

CSS 정리해보기

  • css도 마찬가지로 마우스효과의 기본적인 reset.css 페이지를 가져왔습니다.
  • header와 footer는 position:absolute 속성을 부여해 가운데에 위치하도록 해주었습니다.
  • slider에 position:absolute의 속성으로 같은 위치에 겹치게 놓았습니다.

Javascript 작성하기 (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(() => {
    // 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);

javascript 정리해보기

  • 우선 각각의 선택자를 지정해줍니다.
  • 각각의 변수를 만들어 currentIndex에는 0의 값을, ( 현재 보여지는 이미지의 index로 사용)
  • sliderCount에는 slider(다수)의 개수를, ( 전체 이미지의 개수)
  • sliderInterval에는 3000의 값을 저장합니다. (setInterval함수의 간격에 사용)

 

  • setInterval함수
  • setInterval함수는 일정한 시간 간격으로 함수를 실행하는 javascript의 함수입니다.
  • ( currentIndex의 값이 계속해서 반복되도록 만들어주는 과정)
  • nextIndex라는 변수를 만들어 (currentIndex + 1) % sliderCount의 값을 저장합니다.
  • slider의 currentIndex 번째 요소의 style opacity(투명도)를 "0"으로 만듭니다.
  • slider의 nextIndex 번째 요소의 style opacity(투명도)를 "1"로 만듭니다.
  • currentIndex에 nextIndex의 값을 저장합니다.
  • 이 과정을 sliderInterval 값의 간격으로 반복합니다.

Javascript 작성하기 (GSAP 사용)

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

        gsap.to(slider[currentIndex], {
            opacity : 0,
            duration : 1,
        });

        gsap.to(slider[nextIndex], {
            opacity : 1,
            duration : 1,
        });

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

javascript 정리해보기

  • nextIndex의 변수에는 같은 값을 저장해줍니다.
  • gsap 홈페이지에서 cdn을 가져와 적어줍니다.
  • gsap.to(slider[currentIndex], (slider의 currentIndex 번째에게
  • { opacity : 1의 속성을
  • duration : 1의 시간동안 부여합니다. }
  • 마찬가지로 currentIndex에 nextIndex의 값을 저장합니다.

Javascript 작성하기 (JQuery 사용)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js"></script>
<script>
    setInterval(() => {
        nextIndex = (currentIndex + 1) % $(".slider").length;

        $(slider[currentIndex]).css({opacity : 0});
        $(slider[nextIndex]).css({opacity : 1});

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

javascript 정리해보기

  • jQuery 홈페이지에서 cdn을 가져와 적어줍니다.
  • 같은 방법으로 nextIndex변수를 만들어 같은 값을 저장해줍니다.
  • $(slider[currentIndex]) 에게 css의 opacity 속성을 0으로 부여합니다.
  • $(slider[nextIndex]) 에게 css의 opacity 속성을 1으로 부여합니다.
  • currentIndex에게 nextIndex의 값을 저장합니다.

 

 

 

 

이상으로 transition를 이용한 슬라이드 효과를 세 가지 스크립트 방법으로 알아보았습니다 !

728x90
반응형

'Javascript'의 다른글

  • 현재글슬라이드 효과 만들기(transition)

관련글

댓글

티스토리툴바