브라우저 제목

샘플 예제

http://comlearn.co.kr/project1/desk_mobile/pc.html

http://comlearn.co.kr/project1/desk_mobile/pc2.html

http://comlearn.co.kr/project1/desk_mobile/pc3.html

http://comlearn.co.kr/project1/desk_mobile/tab-ani.html

http://comlearn.co.kr/project1/desk_mobile/touch-section-left.html

http://comlearn.co.kr/project1/desk_mobile/mobile.html

http://comlearn.co.kr/project1/desk_mobile/mobile-pc.html

http://comlearn.co.kr/project1/desk_mobile/slider.html

http://comlearn.co.kr/project1/desk_mobile/slider-page.html

html

<!DOCTYPE html>

<html>

    <head>

    <meta charset="utf-8">

    <title>mobile.html</title>

    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"/>
    <link rel="stylesheet" href="css/touch.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
     <script src="js/touch.js"></script>   
<!--        <script src="js/touch2.js"></script>-->
   
    <script>

    </script>

    </head>

    <body>

    <!-- 

            스마트폰의 브라우저 : 마우스 이벤트와는 별도로 터치 이벤트를 지원함 

            touchstart : 터치가 시작될때

            touchend : 터치가 종료될때 

            touchmove : 터치한 상태로 이동할때 

            touchenter : 터치한 요소의 경계외부에서 내부로 이동할때 

            touchleave : 터치한 요소의 경계내부에서 외부로 이동할때 

     -->

        <div class="wrap">
                     
           <div class="header-wrap">
                        <header>
                            <h1 class="logo"><a href="#"><img src="images/logo.png"></a></h1>
                            <button class="m-open">
                                오픈
                            </button>
                            <nav>
                                <button class="m-close">
                                    X
                                </button>
                                <ul class="main">
                                    <li><a href="#">네비게이션1</a>
                                        <ul class="drop">
                                            <li><a href="#">네비1-1</a></li>
                                            <li><a href="#">네비1-1</a></li>
                                            <li><a href="#">네비1-1</a></li>
                                            <li><a href="#">네비1-1</a></li>
                                            <li><a href="#">네비1-1</a></li>
                                        </ul>

                                    </li>
                                    <li><a href="#">네비게이션2</a>
                                        <ul class="drop">
                                            <li><a href="#">네비2-1</a></li>
                                            <li><a href="#">네비2-1</a></li>
                                            <li><a href="#">네비2-1</a></li>
                                            <li><a href="#">네비2-1</a></li>
                                            <li><a href="#">네비2-1</a></li>
                                        </ul>
                                    </li>
                                    <li><a href="#">네비게이션3</a>
                                        <ul class="drop">
                                            <li><a href="#">네비3-1</a></li>
                                            <li><a href="#">네비3-1</a></li>
                                            <li><a href="#">네비3-1</a></li>
                                            <li><a href="#">네비3-1</a></li>
                                            <li><a href="#">네비3-1</a></li>
                                        </ul>
                                    </li>
                                    <li><a href="#">네비게이션4</a>
                                        <ul class="drop">
                                            <li><a href="#">네비4-1</a></li>
                                            <li><a href="#">네비4-1</a></li>
                                            <li><a href="#">네비4-1</a></li>
                                            <li><a href="#">네비4-1</a></li>
                                            <li><a href="#">네비4-1</a></li>
                                        </ul>
                                    </li>
                                    <li><a href="#">네비게이션5</a>
                                        <ul class="drop">
                                            <li><a href="#">네비5-1</a></li>
                                            <li><a href="#">네비5-1</a></li>
                                            <li><a href="#">네비5-1</a></li>
                                            <li><a href="#">네비5-1</a></li>
                                            <li><a href="#">네비5-1</a></li>
                                        </ul>
                                    </li>
                                </ul>
                            </nav>
                        </header>
                    </div>
 
            <div class="section-wrap">
                <section> 
                    
                   
                    <a href="http://www.naver.com">섹션1</a>
                </section>
                <section>섹션2</section>
                <section>섹션3</section>
                <section>섹션4</section>
            </div>
            <footer>
                푸 터
            </footer>
        </div>

    </body>

</html>

 

css

@charset "utf-8";
html,body{
    margin:0;
    height:100%;
}
::-webkit-scrollbar{
    display:none;
}
a{
    color:#333;
    text-decoration: none;
}
a:hover{
    color:black;
}
*{
    padding:0;
    margin:0;
    box-sizing:border-box;
}
.wrap{
    width:100%;
    height:100%;
}
.section-wrap{
    clear:both;
    width:100%;
    margin:auto;
    padding:0 0;
    background-color:#ededed;
    
}
section{
    height:100%;
    padding:0;
    position:relative;
}
section:first-child{
    padding-top:0;
}
section:nth-child(2){
    background:pink;
}
section:nth-child(3){
    background:cyan;
}
section:last-child{
    background:purple;
}

.header-wrap{
    width:100%;
    position:static;
    border-bottom:2px solid #eeeeee;
    padding-bottom:10px;
    background:white;
    top:-70px;
    left:0;
    z-index:999;
    padding:10px 0;
    transition:0.5s;
    float:left;
}
header{
    width:100%;
    max-width:1600px;
    margin:auto;
    
    z-index:10;
    
}
.logo{
    width:150px;
    margin:auto;
    
}
.logo img{
    width:100%;
}
nav{
    width:100%;
    height:100%;
    background:white;
    position:fixed;
    top:0;
    transition:0.5s;
    overflow:auto;
    left:-100%;
    z-index:9999;

}
.main{
    width:90%;
    text-align:center;
    background:#333;
    clear:both;
    margin:auto;
    transform:translateY(140px);
    padding:10px;
    
}
.main>li{
    list-style:none;
    width:100%;
    padding:2px 0;
    position:relative;
    text-align:left;
    
}
.main>li>a{
    display:flex;
    height:50px;
    align-items: center;
    color:white;
    background:#222;
    text-indent:10px;
}
.main>li>a.active{
    background:black;
    box-shadow:0px 0px 5px #999;
}

.m-open{
    width:50px;
    height:50px;
    position:absolute;
    top:10px;
    left:10px;
}
.m-close{
    width:30px;
    height:30px;
    float:right;
    margin-right:10px;
    margin-top:10px;
    background:transparent;
    border:none;
}

.drop{
    width:100%;
    background:white;
    text-align:left;
    text-indent:30px;
    display:none;
}
.drop>li{
    list-style:none;
}
.drop>li>a{
    display:block;
    padding:10px 0;
    border-bottom:1px dashed #666;
}
.drop>li:last-child a{
    border-bottom:none;
}
footer{
    width:100%;
    height:50px;
    background:#333;
    display:flex;
    justify-content: center;
    align-items: center;
    color:white;
    transition:0.5s;
    position:static;
    bottom:-70px;
    transition:0.5s;
}
@media screen and (max-width:800px){
    .header{
        float:left;
    }
}

js(모바일과 pc를 구분해서 처리, 모바일에서는 한 섹션씩 애니메이션)

$(document).ready(function() { 
   var winHeight, $lengh, winWidth;
    var y=last=mlast=mslast=x=moveTop=count=moveLeft=0;
    var drag;
    var bool=false;
    
    function ini(){
        winHeight=$(window).height();
        $lengh=$("section").length;
        console.log("창의 높이 : "+winHeight);  
        winWidth=$(window).width();
        drag=false;
        $("section").css({
            width:winWidth,
            float:"none",
            height:winHeight,
        });
    }
    
    
    //모바일 운영체제 확인
    var myAgent=navigator.userAgent.toLowerCase();
    var mobile=["iphone","ipod","android","blackberry","window ce","nokia","webos","opera mine","sonyericsson","opera mobi","iemobile"]; 
    
    for(i=0; i<mobile.length; i++){
        if(myAgent.indexOf(mobile[i])>=0){
            bool=true;
            
            break;
        }
        
    }
    
    if(bool){
       mo(); 
    }else{
        pc();
    }
    function mo(){
        ini();
        size();
        

        
        //터치
        $("section").each(function(index){
            console.log(index);
            $(this).on('touchstart', function(e) {
                count=index;
                console.log("터치가 시작");
                console.log(index)
                return false;
            });

        });
        $("section").on('touchmove', function(e) {

            var event = e.originalEvent;

            console.log("터치 이벤중입니다.")

            console.log(event.touches[0].screenX) ;
            console.log(event.touches[0].screenY);

            y=event.touches[0].screenY;

                console.log("y값 : "+y);

                if(y>mlast){
                    console.log("내렸음");
                    moveTop=count-1;
                    $("footer").css({
                        position:"fixed",
                        "z-index":999,
                        bottom:0,
                    });
                    $(".header-wrap").css({
                        opacity:0,
                    });

                }else{
                    console.log("올렸음");
                    moveTop=count+1;

                    $(".header-wrap").css({
                        position:"fixed",
                        top:0,
                        opacity:1
                    });
                    
                }
                mlast=y;


                
                $("html,body").stop().animate({
                    scrollTop:moveTop*winHeight
                });
            console.log("count : "+moveTop)
                if(moveTop<=0 ){
                    $("footer").css({
                        position:"static",
                        bottom:-70
                    });
                    $(".header-wrap").css({
                        position:"static",
                        top:-70,
                        opacity:1
                    })
                }
            
            
            return false;

        });

        $("section").on('touchend', function(e) {

            console.log("터치이벤트가 종료되었어요"); 
            return false;

        });
        
    }
    
    function pc(){
        ini();
        size();
        console.log("pc")
           

        $(window).scroll(function(){
            var winScroll=$(window).scrollTop();
            if(winScroll>last){
                console.log("스크롤을 내리고 있음");
                moveTop=count+1;
                $("footer").css({
                    position:"static",
                    "z-index":999,
                    bottom:-70,

                }); 
                $(".header-wrap").css({
                    position:"fixed",
                    top:0
                });

            }else{
                console.log("스크롤을 올리고 있음")
                if(winScroll<100){
                    $("footer").css({
                        position:"static",
                        bottom:-70,
                    });
                }else{
                   $("footer").css({
                        position:"fixed",
                        "z-index":999,
                        bottom:0,
                    }); 
                }

                    $(".header-wrap").css({
                        position:"static",
                        top:-70
                    });
            }
            last=winScroll;
        });
    }
    
   function size(){
       $(window).resize(function(){
            ini();
           console.log(winWidth)
        });
   }
    
    $(".m-open").click(function(){
        $("nav").css({
            left:0
        });
    });
    $(".m-close").click(function(){
        $("nav").css({
            left:"-100%"
        });
    });
    $(".main>li>a").click(function(){
        if($(this).parent().find(".drop").is(":visible")){
           $(".drop").slideUp(); 
        }else{
            $(".drop").slideUp();
            $(this).parent().find(".drop").slideDown();
        }
    });
    
});

 

js2(마우스 이벤트만으로 처리)

$(document).ready(function() { 
   var winWidth, boxWidth;
    var last=0;
    var array=[];
    
    
    function ini(){  
        winWidth=$(window).width();
        
        boxWidth=$(".box1").width();
        $(".box1, .box2, .box3").css({
            height:boxWidth
        });
        
    }
    $("section").each(function(index){
        if(index<3){
            array[index]=$(this).find(".box"+(index+1)).offset().top;
            console.log(array[index]);
        }
    });
    $(".box1").addClass("addTrans");
    
   function size(){
       $(window).resize(function(){
            ini();
           console.log(winWidth)
        });
   }
    function $scroll(){
        $(window).scroll(function(){
            var winScroll=$(window).scrollTop();
            if(winScroll>last){
                console.log("스크롤을 내리고 있음");
                $("footer").css({
                    position:"static",
                    "z-index":999,
                    bottom:-70,

                }); 
                $(".header-wrap").css({
                    position:"fixed",
                    top:0
                });
                
//              각 섹션에 있는 박스 애니메이션
                if(winScroll+600>array[0] && winScroll<array[1]-600){
                    
                }else if(winScroll+600>array[1] && winScroll<array[2]-600){
                    $(".box1").removeClass("addTrans");
                    $(".box2").addClass("addScale");
                    
                }else if(winScroll+600>array[2]){
                    $(".box2").removeClass("addScale");
                    $(".box3").addClass("addMove");
                 }else if(winScroll<array[2]-600){
                     $(".box3").removeClass("addMove");
                 }

            }else{
                console.log("스크롤을 올리고 있음")
                if(winScroll<100){
                    $("footer").css({
                        position:"static",
                        bottom:-70,
                    });
                }else{
                   $("footer").css({
                        position:"fixed",
                        "z-index":999,
                        bottom:0,
                    }); 
                }

                $(".header-wrap").css({
                    position:"static",
                    top:-70
                });
                
//              각 섹션에 있는 박스 애니메이션
                if(winScroll<array[0] ){
                    $(".box1").addClass("addTrans");
                    $(".box2").removeClass("addScale");
                }else if(winScroll+600>array[1] && winScroll<array[2]-400){
                    $(".box2").addClass("addScale");
                    $(".box3").removeClass("addMove")
                    
                }else if(winScroll+600>array[2]){
                    $(".box3").addClass("addMove")
                 }else{
                     
                 }
            }
            last=winScroll;
        });
        
    }
    
    function pc(){
        size();
        console.log("pc")
        $scroll();
        
        
    }
    pc();
    
    $(".m-open").click(function(){
        $("nav").css({
            left:0
        });
    });
    $(".m-close").click(function(){
        $("nav").css({
            left:"-100%"
        });
    });
    $(".main>li>a").click(function(){
        if($(this).parent().find(".drop").is(":visible")){
           $(".drop").slideUp(); 
        }else{
            $(".drop").slideUp();
            $(this).parent().find(".drop").slideDown();
        }
    });
});

 

제목 날짜
포트폴리오 샘플 2020.05.21
데스크탑, 모바일 구분 접속 2019.02.11
터치이벤트, pc환경과 모바일 환경 알아내기 file 2020.05.04
코르도바 를 설정하기 위한 방법 file 2020.04.26
sticky position file 2020.04.22
webfont file 2020.04.21
video file 2020.04.15
audio2 file 2020.04.15
audio 2020.04.11
wheel이벤트3 file 2020.04.11
wheel이벤트2 file 2020.04.11
wheel이벤트1 file 2020.04.11
드레그 앤 드롭 효과 예제 file 2020.04.03
드레그 앤 드롭 효과 원리 file 2020.04.03
슬라이드 페이지 네이션 file 2020.04.02
좌/우 슬라이드 슬라이드 개수처리, 너비 처리 file 2020.04.02
모바일 작업 file 2020.04.02
자격증 슬라이드 기본 2020.03.30
스크롤바 없에는 css 2020.03.30
터지이벤트와 mouseup, mousedown이벤트 2020.03.28
태그 목록