Question

我有一个固定的背景图像贴在身体标签上，图像是2048像素乘2048像素并且是居中的：

body {
   background: url(images/background.jpg) 50% 0% no-repeat fixed;
}

我想在背景中添加一些动作，以便在观众浏览网站时平移整个图像

使用：https://github.com/brandonaaron/jquery-cssHooks/blob/master/bgpos.js来规范化背景位置属性，我可以按如下方式为图像设置动画：

$('body').animate({
    backgroundPositionX: '100%',
    backgroundPositionY: '100%'
}, 10000, 'linear');

我希望添加随机动作，而不是在10秒内到达右下角。

使用设置间隔我可以每隔10秒为图像设置动画，但如何确定背景位置百分比？当图像移动时，它应该是相同的速度，只是随机位置

var currX = 50;
var currY = 0;

$(function () {
    animate();

    window.setInterval(animate(), 10000);
});

function animate() {
    var newPosX = currX - (Math.random() * 50);
    var newPosY = currY - (Math.random() * 50);

    $('body').animate({
        backgroundPositionX: newPosX + '%',
        backgroundPositionY: newPosY + '%'
    }, 10000, 'linear');
}

编辑：更好地描述我想要做的事情的小提琴：http://jsfiddle.net/97w7f3c8/4/

Answer 1

只是一个如何完成它的例子。通过随机角度选择随机方向，然后检查目的地是否超出0到100的范围（可能没有必要）

$(function() {
     var p = [0, 0], speed = 10, runMe = function () {
        var angle = Math.random() * 2 * Math.PI;
        var d = [
            speed * Math.cos(angle), 
            speed * Math.sin(angle)
        ];

        for (var i = 0; i < 2; i++)
           p[i] = (p[i] + d[i] > 100 || p[i] + d[i] < 0) ? p[i] - d[i] : p[i] + d[i];

        $('body').animate({
            backgroundPositionX: p[0] + '%',
            backgroundPositionY: p[1] + '%'
        }, 5000, 'linear', runMe);
     };
    
     runMe();
});

body {
 background: url(http://www.psdgraphics.com/file/colorful-triangles-background.jpg);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
</script>
<script src="https://github.com/brandonaaron/jquery-cssHooks/blob/master/bgpos.js">
</script>

Answer 2

CSS3现在supports背景过渡原生，如下所示。不需要bgpos.js。此外，根据我的经验，这在移动设备上表现得更好 - 运动平稳而没有波动。我认为这是因为原生CSS转换允许硬件加速。

body {
    background: url(../img/mypic.jpg);
    background-repeat: no-repeat;
    background-position: 50% 50%;
    transition: 0s linear;
    transition-property: background-position;
}

var defaultTime = 10000;

var x1 = 50, y1 = 50, moveBackground = function() {

    var x2 = Math.random() * 100;
    var y2 = Math.random() * 100;

    // pythagorean theorem
    var distance = Math.sqrt( Math.pow(x1 - x2, 2)+ Math.pow(y1 - y2, 2) );

    var time = defaultTime * (distance / 100);

    $('body').css({
        'transition-duration': time + 'ms',
        'background-position': x2+'% '+y2+'%'
    });

    x1 = x2;
    y1 = y2;

    setTimeout(moveBackground, time);
};

moveBackground();

随机平滑地移动背景图像

2 个答案: