브라우저 제목

예제샘플

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

html

<!doctype html>   
<html lang="ko">  
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>모바일부터 데스크탑 반응</title>
        
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
        <!-- 사용자 css  -->
        <link rel="stylesheet" href="css/sticky.css">
        
        <style>
        
        </style>
        <script src="js/jquery-3.4.1.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
        <script src="js/sticky.js"></script>
        
        <script>
        
        </script> 
    </head>
    <body>
        
            <div class="wrap">
                <div class="section-wrap">
                    <div class="section" id="s0">
                        <div class="we">
                            <span>우리들 케이터링</span>
                        </div>
                        <div class="box-wrap">
                            <div class="box1">
                                <img src="images/bona4.jpg" >
                            </div>
                            <div class="box2">
                                <img src="images/bona4.jpg" >
                            </div>
                        </div>
                        <a href="#s1" class="arrow">
                            <i class="fa fa-angle-down"></i>
                        </a>
                    </div>
                    <div class="section" id="s1">
                        <h3 class="s1ani">섹션1</h3>
                    </div>
                    <div class="section">
                        <h3 class="s2ani">섹션2</h3>
                    </div>
                    <div class="section">섹션3</div>
                </div>


            </div>
        
    </body>
</html>

 

css

 

@charset "utf-8"; 
html,body{ 
    margin:0;
    height:100%;
    background:#eeeeee;
    
}
html::-webkit-scrollbar{
    display:none;
}
.wrap{
    width:100%;
/*    height:100%;*/
    position:relaive;
    float:left;    
    
   
}


.section-wrap{
    width:100%;
/*    height:100%;*/
    position:relative;
    left:0;
    
}

.section{
    width:100%;
/*    height:100%;*/
    height:500px;
/*    float:left;*/
    background:yellow;
    position:relative;
    position:sticky;
    position:-webkit-sticky;
    left:0;
    top:0;
    display:flex;
    justify-content: center;
    align-items: center;
    color:white;
    overflow:hidden;
    
}

.section:first-child{
    background:url(../images/background1.jpg) no-repeat center;
    background-size:cover;
    background-attachment: fixed;
    
    
}
.section:nth-child(2){
    background:url(../images/background2.jpg) no-repeat center;
    background-size:cover;
    background-attachment: fixed;
}
.section:nth-child(3){
    background:url(../images/background3.jpg) no-repeat center;
    background-size:cover;
    background-attachment: fixed;
}
.section:last-child{
    background:url(../images/background4.jpg) no-repeat center;
    background-size:cover;
    background-attachment: fixed;
}

.we{
    width:10%;
    height:80%;
    min-height:600px;
    background:rgba(0,0,0,0.2);
    margin-right:30px;
    writing-mode:vertical-rl;
    font-size:2em;
    word-spacing:10px;
    display:flex;
    justify-content: center;
    align-items: center; 
    opacity:1;
}

.box-wrap{
    width:70%;
    opacity:0;
    transition:1s;
}
.addbox-wrap{
    opacity:1;
}
.box-wrap img{
    width:100%;
}
.box1{
    width:40%;
    float:left;
    margin:0 20px;
}

.box2{
    width:40%;
    float:left;
}
.arrow{
    position:absolute;
    bottom:20px;
    font-size:2em;
    width:50px;
    height:50px;
    background:transparent;
    border:none;
    color:white;
    text-shadow:2px 2px 5px black;
}

.arrow{
    animation:arrow-ani 1s linear infinite;
}

@keyframes arrow-ani{
    0%{
        bottom:20px;
    }
    50%{
        bottom:40px;
    }
    100%{
        bottom:20px;
    }
}
.s1ani,
.s2ani{
    width:80%;
    height:500px;
    background:#666;
    color:white;
    font-size:2em;
    display:flex;
    justify-content: center;
    align-items: center;
    box-shadow:inset 0 0 5px black;
    opacity:0;
    transition:1s;
    transform:translateY(200px);
    
}

.adda1{
    transform:translateY(0);
    opacity:1;
}

 

js

 

$(function(){
    var pos=[];
    function winH(){
        var winHeight=$(window).height();
        $(".section").css({
            height:winHeight
        });
        
        $(".section").each(function(index){
            pos[index]=parseInt( $(this).offset().top );
            console.log("포지션"+index+" : "+pos[index]);
        });
        
        $(".box-wrap").addClass("addbox-wrap");
        
        $(window).scroll(function(){
            var winScroll=$(window).scrollTop();
            console.log("스크롤 바 : "+winScroll);
            console.log(pos[1]);
            if(winScroll>=0 && winScroll<=pos[1]-400){
                $(".box-wrap").addClass("addbox-wrap");
            }else if(winScroll+400>pos[1] && winScroll<pos[2]-400){
                console.log("도달했음")
                $(".s1ani").addClass("adda1");
                $(".box-wrap").removeClass("addbox-wrap"); 
            }else if(winScroll+400>pos[2] && winScroll<pos[3]-400){
                $(".s1ani").removeClass("adda1");
                $(".s2ani").addClass("adda1");
            }else{
                $(".s2ani").removeClass("adda1");
            }
        });
    }
    winH();
    $(window).resize(function(){
        winH();
    });
    
    
});

제목 날짜
포트폴리오 샘플 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
태그 목록