브라우저 제목

샘플

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

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

http://comlearn.co.kr/project1/mobile/a.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/mouewheel.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/mousewheel.js"></script>
        
        <script>
        
        </script> 
    </head>
    <body>
        
            <div class="wrap">
                <div class="section-wrap">
                    <div class="section">
                        <h3>섹션0</h3>
                    </div>
                    <div class="section">
                        <div class="video">
                            <video controls autoplay loop muted >
                                <source src="media/Makeup.mp4" type="video/mp4">
                            </video>
                        </div>
                    </div>
                    <div class="section">
                        <div class="sound">
                            
                            <button class="play fa fa-play-circle" id="btn1"></button>
                            <!-- SOUNDS -->
                            <audio id="sound1" controls loop>
                                <source src="audio/music.mp3" type="audio/ogg" />
                            </audio>
                        </div>
                    </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;    
    background:red;
   
}


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

.section{
    width:100%;
    height:100%;
    float:left;
    background:yellow;
    position:relative;
    left:0;
    display:flex;
    justify-content: center;
    align-items: center;
    color:white;
    overflow:hidden;
    
}
.section>div{
    margin:20px;
}
.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;
}
.video{
    width:100%;
    height:100%;
    display:flex;
    justify-content: center;
    align-items: center;
}
.video video{
    position:absolute;
    right:0;
    
    min-width:100%;
    min-height:100%;
}

@media screen and (max-width:1200px){
   
}
 

 

js

 

$(function(){
    var last=0;
    var scrollEvent=true;
    var moveTop=0;
    var sLen=$(".section").length;
    var sHeight=$(".section").height();
    var fullHeight=sHeight*(sLen-1);
    console.log(sLen);
    $(window).on('DOMMouseScroll mousewheel', function(e){
            if(e.originalEvent.wheelDelta > 0 || e.originalEvent.detail < 0) {
                console.log("올렸어요");
                if(scrollEvent){
                    if(moveTop<=0){
                        moveTop=0;
                    }
                    moveTop--
                     scrollEvent=false;
                }else{
                    scrollEvent=true;
                }
            }else{
                console.log("내렸어요");
                if(scrollEvent){
                    if(moveTop*300>fullHeight){
                        console.log("마지막입니다.");
                       moveTop=last; 
                    }
                    last=moveTop;
                    moveTop++
                     scrollEvent=false;
                }else{
                    scrollEvent=true;      
                }   
            }
            console.log("moveTop : "+moveTop);
            $("html,body").stop().animate({
                scrollTop:moveTop*300
            },700,"easeOutQuad");

    });


});

 

휠 콘텐츠 애니메이션

 

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/mouewheela.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/mousewheela.js"></script>
        <script>
        
        </script> 
    </head>
    <body>
        
            <div class="wrap">
                <div class="section-wrap">
                    <div class="section">
                        <h3 class="ani">홈페이지 타이틀</h3>
                    </div>
                    <div class="section">
                        <div class="video">
                            <video controls autoplay loop muted >
                                <source src="media/Makeup.mp4" type="video/mp4">
                            </video>
                        </div>
                    </div>
                    <div class="section">
                        <div class="sound">
                            <div class="sound-thum">
                                <img src="images/background1.jpg" alt="이미지">
                            </div>
                            <audio id="sound1" controls loop>
                                <source src="audio/music.mp3" type="audio/mp3" />
                            </audio>
                        </div>
                    </div>
                    <div class="section">
                        <h3 class="ani">Multi Media</h3>
                        <div class="box ani">박스1</div>
                    </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;    
    background:red;
   
}


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

.section{
    width:100%;
    height:100%;
    float:left;
    background:yellow;
    display:flex;
    flex-direction: column;
    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;
}
.ani{
    position:absolute;
    width:50%;
    height:100px;
    padding:20px;
    background:#333;
    text-align:center;
    font-size:3em;
    display:flex;
    justify-content: center;
    align-items: center;
    text-shadow:5px 5px 5px black;
    transition:0.5s;
    transition-delay:0.2s;
    margin-top:200px;
    
}
.video{
    width:50%;
    height:auto;
    display:flex;
    justify-content: center;
    align-items: center;
    position:absolute;
    transition:0.5s;
    transition-delay:0.2s;
    margin-top:200px;
}
.video video{
    position:absolute;
    right:0;
    width:100%;
}

.sound{
    width:30%;
    min-width:400px;
    position:absolute;
    transition:0.5s;
    transition-delay:0.2s;
    margin-top:200px;
}
.sound-thum{
    width:100%;
    float:left;
    border:2px solid #333;
}
.sound-thum>img{
    width:100%;
}
audio{
    width:100%;
    height:30px;
    background:#f1f3f4;
    transition:0.5s;
    transition-delay:0.2s;
}

audio::-webkit-media-controls-panel{
    display: flex;
    flex-direction: row;
    align-items: center;

    justify-content: flex-start;
    -webkit-user-select: none;
    position: relative;
    width: 100%;
    z-index: 0;
    overflow: hidden;
    text-align: right;
    bottom: auto;
    height: 30px;
    -moz-border-radius:0 ;
    -webkit-border-radius:0 ;
    border-radius:0 ;

}
.box{
    margin-top:1000px;
}

 

js

 

$(function(){ 
    var last=0;
    var scrollEvent=true;
    var moveTop=0;
    var sLen=$(".section").length;
    var sHeight=$(".section").height();
    var fullHeight=sHeight*(sLen-1);
    console.log(sLen);
    $(window).on('DOMMouseScroll mousewheel', function(e){
            if(e.originalEvent.wheelDelta > 0 || e.originalEvent.detail < 0) {
                console.log("올렸어요");
                if(scrollEvent){
                    if(moveTop<=0){
                        moveTop=0;
                    }
                    moveTop--
                     scrollEvent=false;
                }else{
                    scrollEvent=true;
                }
            }else{
                console.log("내렸어요");
                if(scrollEvent){
                    if(moveTop*300>fullHeight){
                        console.log("마지막입니다.");
                       moveTop=last; 
                    }
                    last=moveTop;
                    moveTop++
                     scrollEvent=false;
                }else{
                    scrollEvent=true;
                    
                }
                
            }
            console.log("moveTop : "+moveTop);
            $("html,body").stop().animate({
                scrollTop:moveTop*300
            },700,"easeOutQuad");
            $(".ani, .video, .sound").css({
                transform:"translateY("+(-moveTop*100)+"px)"
                
            });
        
    });
   
});

 

 

 

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