仿探探滑屏交互

探探滑屏交互

探探滑屏交互

页面布局：

<div class="card">
  <div class="box">
     <div>/*这里可以放小姐姐的照片*/</div>
     <div></div>
     <div></div>
     <div></div>
     <div></div>
     <div></div>
  </div>
</div>

样式设置

<style>
html{
 font-size:4vw;     /*如果手机屏幕是414px,那么默认字体大小就是4 * 4.14 = 16.56px*/
 height: 100%; 
}
body{
 margin:0;
 height:100%;
}
.card{
 position: relative;
 height:100vh;
 width: 100vw;
 perspective:500px; /*景深：实现近大远小的效果*/
 perspective-origin: center 580px;
}
.box{
 position:absolute;
 left:50%;
 top:50%;
 transform:translate(-50%, -50%);
 transform-style:preserve-3d;
 width: 20rem ;
 height: 20rem;
}
.box div{
 position:absolute;
 top:0;
 left:0;
 width: 100%;
 height: 100%;
 transform-origin: bottom center;
 background: pink;
}
.box div:nth-child(2){
 background:#8d6ebc;
}
.box div:nth-child(3){
 background:#bcb26e;
}
.box div:nth-child(4){
 background:#db8064;
}
.box div:nth-child(5){
 background:#64d7db;
}
.box div:nth-child(6){
 background:#8d6ebc;
}
</style>

动画实现
通过js实现卡片样式的初始化

var card = document.querySelecor('.card')
var boxDiv = document.querySelectorAll('.box div')
var positionArr = []
var current = 0   // 显示在最前面的卡片的index
// 初始化卡片样式
function init () {
 Array.from(boxDiv).forEach((item, index) => {
  item.style.transform = 'tranlateZ(' + index * 60 + 'px)'
  // 把每个卡片的初始位置存到数组
  positionArr.push(index * 60)   
 })
}

touch事件

var startpointX= 0
var rotate = 0
card.addEventListener('touchstart', function (e) {
 startpointX = e.touches[0].clientX
}, false)
card.addEnentListener('touchmove', function (e) {
 let { clientX } =  e.touches[0]
 rotate = ( clientX - startpointX ) * 0.05 * -1
 divBox[current].style.transform = 'rotate(' + rotate + 'deg)'
}, false)
card.addEventListener('touchend', function (e) {
 // 左滑小于10deg
 if (rotate < -10) {
  boxDiv[current].style.transform = 'rotate(' + rotate + 'deg) translateX(-500px)'
  boxDiv[current].style.transition = '.5s, opacity .1s .3s'
 } else if (rotate > 10) {
   // 右滑大于10deg
  boxDiv[current].style.transform = 'rotate(' + rotate + 'deg) translateX(500px)'
  boxDiv[current].style.transition = '.5s, opacity .1s .3s'
 } else {
  boxDiv[current].style.transform = 'rotate(0deg)'
 }
 current ++ 
 move()
 if(current === positionArr.length){
  current = 0
 }
}, false)

滑屏移出卡片

function move () {
 // 移出位置坐标的首项，并把其坐标添加到数组末尾
 positionArr.unshift(position.pop())
 boxDiv[current].style.opacity = '0'
 Array.from(boxDiv).forEach((item, index) => {
  if (current === index) {
   return
  }
  item.style.tranform = 'translateZ('positionArr[positionArr.length]'px)'
  item.style.opacity = '1'
  item.style.transition = '.3s, opacity .1s .3s'
 })
}

效果预览：gif看起来有点卡，可以把代码中的rotate调大一点，看起来会流畅些

Video_2018-12-06_143044.gif

还有类似的其他案例（素材和灵感来源于秒味课堂公开课）：

Video_2018-12-06_141909.gif
Video_2018-12-06_141814.gif