探探滑屏交互
探探滑屏交互
页面布局：
<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
