슬라이드 이펙트

소스보기

Javascript

jquery

css

{
    window.onload = function(){
        let currentIndex = 0;                                       // 현재 이미지
        const slider = document.querySelectorAll(".slider");        // 모든 이미지를 변수에 저장

        setInterval(() => { // 3초에 한번씩 실행
            let nextIndex = (currentIndex + 1) % slider.length       // 0  1 2 3 4 0 1 2 3 4
            
            slider[currentIndex].style.opacity ="0";                //첫번째 이미지가 사라짐
            slider[nextIndex].style.opacity ="1";                   //두번째 이미지가 나타남
            slider.forEach(img => img.style.transition = "all 1s");  // 이미지 애니메이션 추가

            currentIndex = nextIndex;  // 두번째 인덱스값을 현 인덱스값에 저장
        }, 3000);
    }
}

{
    (function(){
        let currentIndex = 0;  // 현재 이미지

        setInterval(function(){                             //3초에 한번씩 실행
            let nextIndex = (currentIndex + 1) % 5;

            $(".slider").eq(currentIndex).fadeOut(1200);    //첫번째 이미지 사라짐
            $(".slider").eq(nextIndex).fadeIn(1200);        //두번째 이미지 나타남

            currentIndex = nextIndex;
        }, 3000);
    });
}

{
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: "NexonLv1Gothic";
    }
    pre code.hljs {
        margin-bottom: 0 !important;
    }
    
    body {
        width: 100%;
        height: 100vh;
    }
    body.img01 {
        background: #000 url(../img/1-min.jpg) no-repeat center / cover;
    }
    body.img02 {
        background: #000 url(../img/2-min.jpg) no-repeat center / cover;
    }
    body.img03 {
        background: #000 url(../img/3-min.jpg) no-repeat center / cover;
    }
    body.img04 {
        background: #000 url(../img/4-min.jpg) no-repeat center / cover;
    }
    body.img05 {
        background: #000 url(../img/5-min.jpg) no-repeat center / cover;
    }
    body.img06 {
        background: #000 url(../img/6-min.jpg) no-repeat center / cover;
    }
    body.img07 {
        background: #000 url(../img/7-min.jpg) no-repeat center / cover;
    }
    body.img08 {
        background: #000 url(../img/8-min.jpg) no-repeat center / cover;
    }
    body.img09 {
        background: #000 url(../img/9-min.jpg) no-repeat center / cover;
    }
    body.img10 {
        background: #000 url(../img/10-min.jpg) no-repeat center / cover;
    }
    body::after {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(23,20,88,0.486);
        z-index: -1;
    }
    img {
        width: 100%;
        height: 100%;
        vertical-align: top;  /* 이미지 여백 제거 */
    }
    a {
        color: #fff;
        text-decoration: none;
    }
    
    /* scroll */
    ::-webkit-scrollbar {
        width: 10px;
        height: 10px;
    }
    ::-webkit-scrollbar-track {
        background: #1f224a26;
    }
    ::-webkit-scrollbar-thumb {
        background: rgba(69, 71, 100, 0.321);
        border-radius: 20px;
    }
    
    /* header */
    #header {
        position: absolute;
        left: 0;
        top: 0;
        color: #fff;
        padding: 20px;
    }
    #header h1 {
        display: inline-block;
        font-weight: 300;
        margin-bottom: 10px;
        border-bottom: 1px dashed #fff;
    }
    #header p {
        margin-bottom: 10px;
    }
    #header li {
        display: inline-block;
    }
    #header li a {
        border: 1px solid #fff;
        border-radius: 50%;
        display: inline-block;
        width: 30px;
        height: 30px;
        text-align: center;
        line-height: 30px;
        font-size: 14px;
    }
    #header li.active a {
        background-color: #fff;
        color: #33377d;
    }
    
    
    /*modal__wrap */
    .modal__btn {
        color: #fff;
        border: 1px solid #fff;
        border-radius: 50px;
        display: inline-block;
        padding: 10px 20px;
        position: absolute;
        right: 20px;
        bottom: 20px;
        cursor: pointer;
    }
    .modal__cont {
        width: 100%;
        height: 100vh;
        background-color: rgba(0, 0, 0, 0.7);
        position: fixed;
        left: 0;
        top: 0;
        overflow-x: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 1000;
        transform: scale(0);
    }
    .modal__box {
        width: 70%;
        border-radius: 10px;
        background-color: #ccc;
        transform: scale(0);
    }
    .modal__box .title {
        padding: 1rem;
        background-color: #1b1c2e;
        display: flex;
        align-items: center;
        color: #fff;
        height: 50px;
        border-top-left-radius: 0.5rem;
        border-top-right-radius: 0.5rem;
    }
    .modal__box .title .dot {
        width: 15px;
        height: 15px;
        background-color: #3b3d63;
        display: inline-block;
        border-radius: 50%;
        position: relative;
        margin-left: 2rem;
    } 
    
    .modal__box .title .dot::before {
        content:'';
        position: absolute;
        left: 25px;
        top: 0;
        width: 15px;
        height: 15px;
        background-color: #3b3d63;
        border-radius: 50%;
    }
    .modal__box .title .dot::after {
        content:'';
        position: absolute;
        right: 25px;
        top: 0;
        width: 15px;
        height: 15px;
        background-color: #3b3d63;
        border-radius: 50%;
    }
    
    
    .modal__box .title .tabs {
        display: flex;
        margin-left: 50px;
    }
    .modal__box .title .tabs > div {
        color: #7a7d9d;
        background-color: #282936;
        padding: 0.35rem 0.8rem 0.25rem 0.8rem;
        margin-right: 0.5rem;
        display: flex;
        align-items: center;
        border-radius: 0.4rem;
        text-transform: uppercase;
        cursor: pointer;
    }
    .modal__box .title .tabs > div.active {
        background-color: #1f224a;
    }
    .modal__box .title .tabs > div em {
        font-style:normal;
    }
    .modal__box .title .tabs > div.favicon {
        margin-right: 0.4rem;
        margin-top: 0.2rem;
    }
    .modal__box .title .tabs > div.close {
        margin-left: 3rem;
        margin-top: 0.2rem;
    }
    .modal__box .cont {
        background-color: #282936;
        height: auto;
        max-height: 80vh;
        overflow-y: auto;
        box-sizing: border-box;
        border-bottom-left-radius: 0.5rem;
        border-bottom-right-radius: 0.5rem;
    }
    .modal__box .cont > div {
        display: none;
    }
    .modal__box .cont > div.active {
        display: block;
        height: 100%;
       
    }
    .modal__close {
        position: absolute;
        right: 20px;
        top: 20px;
        background-color:#ffff;  
        padding: 1rem 1rem 0.8rem 1rem;
        border-radius: 5px;
        cursor: pointer;
        transition: all 0.3s;
        opacity: 0;
    }
    .modal__close:hover {
        background-color: #b9bdff;
    }
    
    @media (max-width: 1100px){
        .modal__box .title {
            overflow: hidden;
        }
        .modal__box .title .dot {
            display: none;
        }
        .modal__box .title .tabs {
            margin-left: 0;
        }
        .modal__box .title .tabs > div .close {
            display: none;
        }
    }
    @media (max-width: 800px){
        #header {
            width: 100%;
            text-align: center;
        }
        #header h1 {
            line-height: 1.4;
        }
        .modal__box {
            width: 96%;
        }
    }
    
    /* 모달 애니메이션 */
    .modal__cont.show {
        animation: foldOut 1s ease forwards;
    }
    .modal__cont.show .modal__box {
        animation: zoomOut 0.5s 1s ease forwards;
    }
    .modal__cont.show .modal__close {
        animation: opacityOut 0.5s 1.5s ease forwards;
    }
    
    .modal__cont.show.hide {
        animation: foldIn 0.3s 0.5s ease backwards;
    }
    .modal__cont.show.hide .modal__box {
        animation: zoomIn 0.5s  ease backwards;
    }
    .modal__cont.show.hide .modal__close {
        animation: opacityIn 0.5s ease backwards;
    }
    
    @keyframes foldOut {
        0%   {transform: scaleX(0.0001) scaleY(0);}
        50%  {transform: scaleX(0.0001) scaleY(1);}
        100% {transform: scaleX(1) scaleY(1);}
    }
    @keyframes foldIn {
        0%   {transform: scaleX(1) scaleY(1);}
        50%  {transform: scaleX(0.0001) scaleY(1);}
        100% {transform: scaleX(0.0001) scaleY(0);}
    }
    @keyframes zoomOut {
        0%   {transform: scale(0);}
        100% {transform: scale(1);}
    }
    @keyframes zoomIn {
        0%   {transform: scale(1);}
        100% {transform: scale(0);}
    }
    @keyframes opacityOut {
        0%   {opacity: 0;}
        100% {opacity: 1;}
    }
    @keyframes opacityIn {
        0%   {opacity: 1;}
        100% {opacity: 0;}
    }
}