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>