移动应用展示收纳效果

手机展示效果

最近在阅读Codrops时,遇到了一个不错的手机APP效果,想着可以用在视差滚动宣传页中,便尝试着也制作了一下。

整体思路不是很复杂,即旋转整体,展示图片

主要用到的CSS3属性有

  • perspective // 这是为了让手机旋转的时候,有3D效果
  • perspective-origin // 设置观察消失点
  • transition // 设置过渡效果
  • transform // 变换

整个手机设备的transform效果

1
transform: rotateY(50deg) rotateX(20deg) translateZ(-$dv-height/2 + $depth);

宣传图像的变换效果

1
2
3
4
5
@for $i from 1 through 5 {
.expand-view .page-#{$i} {
transform: translateZ($depth/2 + $screengap * $i);
}
}

为图像添加鼠标滑过效果

在页面展开之后,鼠标滑过每个图层,其他图层透明度为0.1

  1. 获取鼠标滑过的图层的兄弟节点,设置他们的style
1
2
3
Array.prototype.filter.call(el.parentNode.children, function(child){
return child !== el;
});
  1. 为鼠标滑过的图层添加active Class,通过css :not()选择器,选择非.active Class的元素,设置他们的透明度

这里采用的是第二种方法。

最终效果预览