在实际开发中,应用一些微交互、视差效果,可以让页面更加生动。如下面的例子:
这个例子中运行了3D transform 的相关知识。具体细节如下分析。
1、切图
将psd稿上的这个区域切成如下图的3块图片,方便在页面上进行叠加、
2、布局
给三张图片设置不一样的translateZ(translateZ的值越小,元素大小越小,因为元素远去,我们眼睛看到的就会变小),这样三层图片就形成了远近的层次效果,否则都在一个平面上,就没有了视差效果,如下:
(缺少了层次效果,就没有了视差效果)
html布局代码:
<div class="banner-row move-row" style="transform-style: preserve-3d;">
<div class="layer right-image" style="transform: translateZ(50px);">
<img src="images/index/br4_img1.png" />
</div>
<div class="layer right-image" style="transform: translateZ(100px);">
<img src="images/index/br4_img2.png" />
</div>
<div class="layer right-image" style="transform: translateZ(150px);">
<img src="images/index/br4_img3.png" />
</div>
</div>
3、JS
用JS实现跟鼠标的互动效果,图片向着鼠标移动的相反方向转动。可以想象一下,Z轴上从远到近,有三张背景透明的图(从屏幕正方看,三张图重叠,看上去就是一张图)然后,让他们在 X轴 或者 Y轴转动,就形成了视差效果。
主要js如下:
var w = $(window).width(), h = $(window).height();
function move(t) {
var moveX = (t.pageX / w - .5) * (-25) || 10, moveY = -(t.pageY / h - .5) * (-20) || 10;
var n = "rotateX(" + moveY + "deg) rotateY(" + moveX + "deg) ";
return n;
}
$(".left-header").on("mousemove", function(e) {
var n = move(e);
$(".move-row").css("transform", n);
});
$(".move-row").on("mousemove", function(e) {
var n = move(e);
$(this).css("transform", n);
});
参考: