仿探探滑屏交互

探探滑屏交互

探探滑屏交互

页面布局：

  

     
/*这里可以放小姐姐的照片*/
     

     

     

     

     

  

样式设置

动画实现
通过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