웹디자인기능사 슬라이드 효과(좌우,상하,페이드인아웃)

by 데브수달 2024. 3. 5. 17:32

728x90

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>웹디자인기능사 _슬라이드 효과 3가지</title>
    <link rel="stylesheet" href="./css/style.css">
    <script src="./script/lib/jquery-1.9.0.min.js"></script>
    <script src="./script/script.js" defer></script>
</head>
<body>
    <div id="wrap">
        <header id="header"></header>
        <main id="main">
            <section id="section1">
                <!-- 슬라이드 좌우 -->
                <div class="slide-container">
                    <div class="slide-content">
                        <ul class="slide-wrap1">
                            <li class="slide slide3"></li>
                            <li class="slide slide1"></li>
                            <li class="slide slide2"></li>
                            <li class="slide slide3"></li>
                            <li class="slide slide1"></li>
                        </ul>
                    </div>
                </div>
            </section>
            <section id="section2">
                <!-- 슬라이드 상하 -->
                <div class="slide-container">
                    <div class="slide-content">
                        <ul class="slide-wrap2">
                            <li class="slide slide3"></li>
                            <li class="slide slide1"></li>
                            <li class="slide slide2"></li>
                            <li class="slide slide3"></li>
                            <li class="slide slide1"></li>
                        </ul>
                    </div>
                </div>
            </section>
            <section id="section3">
                <!-- 슬라이드 페이드인아웃 -->
                <div class="slide-container">
                    <div class="slide-content">
                        <ul class="slide-wrap3">
                            <li class="slide slide1"></li>
                            <li class="slide slide2"></li>
                            <li class="slide slide3"></li>
                        </ul>
                    </div>
                </div>
            </section>
        </main>
        <footer id="footer"></footer>
    </div>
</body>
</html>

@import url('./reset.css');

#wrap{ width: 100%; height: 100%; margin: 0 auto;}
#wrap #header{ width: 100%; height: 100px; background-color: black;}
#wrap #main{width: 1340px; height: 1800px; margin: 0 auto; }
/* 1 */
/* 좌우 슬라이드 구현 */
#wrap #main #section1{width: 1340px; height: 600px; }
#wrap #main #section1 .slide-container{width: 100%; height: 100%;}
#wrap #main #section1 .slide-container .slide-content{width: 100%; height: 100%; overflow: hidden; }
#wrap #main #section1 .slide-container .slide-content .slide-wrap1{
    width: 6700px; height: 100%;
    position: relative;
    margin-left: -1340px;
    display: flex;

}
#wrap #main #section1 .slide-container .slide-content .slide-wrap1 .slide{
    width: 1340px; height: 100%;
    background: url() no-repeat 50% 50%;
    background-size: cover;

}
/* 메인이미지영역 */
#wrap #main #section1 .slide-container .slide-content .slide-wrap1 .slide1{
    background-image: url(../images/japan-2014617_1280.jpg);
}
#wrap #main #section1 .slide-container .slide-content .slide-wrap1 .slide2{
    background-image: url(../images/japan-2014618_1280.jpg);
}
#wrap #main #section1 .slide-container .slide-content .slide-wrap1 .slide3{
    background-image: url(../images/japan-2014619_1280.jpg);
}

/* 2 */
/* 상하 슬라이드 구현 */
#wrap #main #section2{width: 100%; height: 600px; background-color: rgb(126, 177, 177);}
#wrap #main #section2 .slide-container{width: 100%; height: 100%;}
#wrap #main #section2 .slide-container .slide-content{width: 100%; height: 100%; overflow: hidden;}
#wrap #main #section2 .slide-container .slide-content .slide-wrap2{
    position: relative;
    margin-top: -600px;
    width: 100%; height: 3000px;}
#wrap #main #section2 .slide-container .slide-content .slide-wrap2 .slide{
    width: 100%; height: 600px;
    background: url() no-repeat 50% 50%;
    background-size: cover;
}
/* 메인이미지영역 */
#wrap #main #section2 .slide-container .slide-content .slide-wrap2 .slide1{
    background-image: url(../images/back-flip-1390075_1280.jpg);
}
#wrap #main #section2 .slide-container .slide-content .slide-wrap2 .slide2{
    background-image: url(../images/backflip-345027_1280.jpg);
}
#wrap #main #section2 .slide-container .slide-content .slide-wrap2 .slide3{
    background-image: url(../images/parkour-7245311_1280.jpg);
}

/* 3 */
/* 페이드인아웃 구현 */
#wrap #main #section3{width: 100%; height: 600px; background-color: rgb(58, 82, 82);}
#wrap #main #section3 .slide-container{width: 100%; height: 100%;}
#wrap #main #section3 .slide-container .slide-content{width: 100%; height: 100%;}
#wrap #main #section3 .slide-container .slide-content .slide-wrap3{
    position: relative;
    width: 100%; 
    height: 100%;
}
#wrap #main #section3 .slide-container .slide-content .slide-wrap3 .slide{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%; 
    height: 100%;
    background: url() no-repeat 50% 50%;
    background-size: cover;
}

/* 메인이미지영역 */
#wrap #main #section3 .slide-container .slide-content .slide-wrap3 .slide1{
    z-index: 3;
    background-image: url(../images/dog-1866530_1280.jpg);
}
#wrap #main #section3 .slide-container .slide-content .slide-wrap3 .slide2{
    z-index: 2;
    background-image: url(../images/dog-4372036_1280.jpg);
}
#wrap #main #section3 .slide-container .slide-content .slide-wrap3 .slide3{
    z-index: 1;
    background-image: url(../images/maltese-1123016_1280.jpg);
}


#wrap #footer{ width: 100%; height: 100px; background-color: black;}

(function($){

    const script = {
        init(){
            this.section1();
            this.section2();
            this.section3();
        },
        section1(){
            let cnt=0;
            let setId=0;

            //1.
            function mainSlide(){
                $('.slide-wrap1').stop().animate({left:`${cnt*-1340}px`},300,function(){
                    if(cnt>2) cnt=0;
                    $('.slide-wrap1').stop().animate({left:`${cnt*-1340}px`},0)
                })

            }
            //2.
            function nextCount(){
                cnt++;
                mainSlide();
            }
            //3.
            function autoTimer(){
                setId =setInterval(nextCount,3000);
            }
            autoTimer();


        },
        section2(){
            let cnt=0;
            let setId=0;

            //1.
            function mainSlide(){
                $('.slide-wrap2').stop().animate({top:`${cnt*-600}px`},300,function(){
                    if(cnt>2) cnt=0;
                    $('.slide-wrap2').stop().animate({top:`${cnt*-600}px`},0)
                })

            }
            //2.
            function nextCount(){
                cnt++;
                mainSlide();
            }
            //3.
            function autoTimer(){
                setId =setInterval(nextCount,3000);
            }
            autoTimer();
        },
        section3(){
            let cnt=0;
            let setId=0;

            //1.
            function mainSlide(){
                console.log('현재' + (cnt-1<0?2:cnt-1) + '다음' +cnt)

                $('#section3 .slide').css({zIndex:1 , opacity:1});
                $('#section3 .slide').eq(cnt).css({zIndex:2 });
                $('#section3 .slide').eq(cnt-1<0?2:cnt-1).css({zIndex:3}).animate({opacity:0},1000);
            }
            //2.
            function nextCount(){
                cnt++;
                if(cnt>2){cnt=0};
                mainSlide();
            }
            //3.
            function autoTimer(){
                setId =setInterval(nextCount,3000);
            }
            autoTimer();
        },
    }
    script.init();
})(jQuery);

728x90

'[자격증 준비] > 웹디자인기능사' 카테고리의 다른 글

실전코딩 1. 공지사항- 글자줄임 기능 (0)	2023.11.30
[웹디자인기능사 실기 준비] A-1유형 레이아웃 (1)	2023.10.09
웹디자인기능사 A-3유형 레이아웃 (0)	2023.08.30
2023년 웹디자인기능사A유형 레이아웃 (0)	2023.04.01