샘플
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)"
});
});
});