我正试图达到这个效果:
http://www.kennedyandoswald.com/
您移动光标的位置以及页面中的所有元素都会移动,包括背景以及某种缓动效果。
到目前为止:
$(document).on('mousemove', '#slide1', function (e) {
var pageX = e.pageX - ($(window).width() / 2);
var pageY = e.pageY - ($(window).height() / 2);
var newvalueX = width * pageX * -1 - 25;
var newvalueY = height * pageY * -1 - 50;
$('.el').css({
'-webkit-transform-origin': '0px 0px',
'-webkit-transform': 'translate3d( '+newvalueX+'px, '+newvalueY+'px, 0px) scale(1, 1) rotate(0deg)'
});
});
所以我正在移动鼠标,而.el正在制作动画,几乎与网站类似,但运动仍然不流畅且足够长。
.el中的css是为了添加缓动:
.el{
float: right;
margin: 4% 8% 0 0;
-webkit-transition: all 0.5s linear;
}
有人可以帮助我或指出实现同样效果的方法吗?