0
모바일 용으로 만들고 싶은 분할 화면 슬라이더가있는 웹 사이트가 있습니다. 나는 슬라이더가 앞뒤로 움직일 수있게 해주는 addeventlistener 'mousemove'를 가지고 있지만, 나는 또한 촉각을 활성화시키고 싶다.모바일 용 Mousemove
'mousemove'를 'pointermove'및 'touchmove'로 바꾸려고 시도했지만 아무 것도 변경되지 않았습니다. 모바일에서는 여전히 작동하지 않습니다. 도와주세요. codepen은 내 사이트에 대한 예를 보여줍니다.
는document.addEventListener('DOMContentLoaded', function(){
let wrapper = document.getElementById('wrapper');
let topLayer = wrapper.querySelector('.top');
let handle = wrapper.querySelector('.handle');
let skew = 0;
let delta = 0;
if(wrapper.className.indexOf('skewed') != -1){
skew = 1000;
}
wrapper.addEventListener('mousemove', function(e){
delta = (e.clientX - window.innerWidth/2) * 0.5;
handle.style.left = e.clientX + delta + 'px';
topLayer.style.width= e.clientX + skew + delta + 'px';
});
});body{
margin: 0;
padding:0;
font-size: 100%;
line-height: 1.6;
font-family: Arial, Helvetica, sans-serif;
}
#wrapper{
position: relative;
width: 100%;
min-height:55vw;
overflow: hidden;
}
.layer{
position:absolute;
width:100vw;
min-height: 55vw;
overflow: hidden;
}
.layer .content-wrap{
position: absolute;
width:100vw;
min-height: 55vw;
}
.layer .content-body{
width: 25%;
position:absolute;
/* top:50%; */
top: 25%;
text-align: center;
transform:translateY(-50%);
color:#fff;
}
.layer img{
position:absolute;
width:65%;
/*width: 35% */
top:50%;
left:50%;
transform:translate(-50%, -50%);
}
.layer h1 {
font-size:2em;
font-family: 'Lato', sans-serif;
}
.bottom{
background:#686965;
z-index:1;
}
.bottom .content-body{
right:5%;
}
.bottom h1{
color:#7bbe9a;
font-family: 'Lato', sans-serif;
}
.top{
background:#eff0ec;
color:#222;
z-index:2;
width:50vw;
}
.top .content-body{
left:5%;
color:#333;
}
.handle{
position: absolute;
height: 100%;
display: block;
background-color: #7bbe9a;
width: 5px;
top:0;
left: 50%;
z-index:3;
}
.skewed .handle{
top:50%;
transform:rotate(30deg) translateY(-50%);
height:200%;
transform-origin:top;
}
.skewed .top{
transform: skew(-30deg);
margin-left:-1000px;
width: calc(50vw + 1000px);
}
.skewed .top .content-wrap{
transform: skew(30deg);
margin-left:1000px;
}
@media(max-width:768px){
body{
font-size:75%;
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Images not Owned by Me -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="">
<link href="https://fonts.googleapis.com/css?family=Lato|Nixie+One" rel="stylesheet">
</head>
<body>
<section id="wrapper" class="skewed">
<div class="layer bottom">
<div class="content-wrap">
<div class="content-body">
<h1>Designer</h1>
<!-- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> -->
</div>
<img src="http://3d.ford.com/assets/ford_gt-min.png" alt="">
</div>
</div>
<div class="layer top">
<div class="content-wrap">
<div class="content-body">
<h1>Developer</h1>
<!-- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> -->
</div>
<img src="http://3d.ford.com/assets/ford_gt_print.png" alt="">
</div>
</div>
<div class="handle"></div>
</section>
<script src=""></script>
</body>
</html>