使用translate3d和jquery动画el

时间:2014-01-13 11:59:36

标签: jquery css3 css-transforms

我正试图达到这个效果:

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;
}

有人可以帮助我或指出实现同样效果的方法吗?

0 个答案:

没有答案