代码鼠标成果免费素材下载 jQuery连系CSS3完成的超酷3D多层图片鼠标尾随视觉差互动殊效源码

资源魔 65 0

jQuery连系CSS3完成的超酷3D多层图片鼠标尾随视觉差互动殊效源码是一段完成了能够尾随鼠标的挪动轨迹做出相应变化的3D视觉差成果代码,成果十分没有错,小编感觉超酷的,本段代码顺应于一切网页应用,有需求的冤家们能够前来下载应用。本段代码兼容今朝最新的各种支流阅读器,是一款十分优秀的殊效源码。

假如各人十分猎奇该段代码所带来的动画成果的话,能够点击【演示地点】进行预览哦,小编倡议应用【火狐】阅读器预览,如图所示:

外围代码:
var moveForce = 30;
var rotateForce = 20;
$(document).mousemove(function(e) {
var docX = $(document).width();
var docY = $(document).height();

var moveX = (e.pageX - docX/2) / (docX/2) * -moveForce;
var moveY = (e.pageY - docY/2) / (docY/2) * -moveForce;

var rotateY = (e.pageX / docX * rotateForce*2) - rotateForce;
var rotateX = -((e.pageY / docY * rotateForce*2) - rotateForce);

$('.popup')
.css('left', moveX+'px')
.css('top', moveY+'px')
.css('transform', 'rotateX('+rotateX+'deg) rotateY('+rotateY+'deg)');
$('.popup-2')
.css('right', moveX+'px')
.css('bottom', moveY+'px')
.css('transform', 'rotateX('-rotateX-'deg) rotateY('-rotateY-'deg)');
});

标签: jQuery CSS3 视觉差 鼠标跟随

抱歉,评论功能暂时关闭!