Question

我正在尝试创建一个div（成功）的随机移动，与随机不透明度变化（部分成功）相关联。我把两个独立的脚本拼凑成一个，将以下内容放在一起。

不透明度仅在div的每次移动后发生变化。最终，我想让不透明的工作独立于运动。任何帮助将不胜感激！

中有

HTML：

<div id="container">
<div class="a"></div>
</div>

CSS：

div#container {height:500px;width:100%;}

div.a {
   width: 284px;
   height:129px;
   background:url(http://www.themasterbetas.com/wp-content/uploads/2013/08/aliens.png);
   position:fixed;
 }

jQuery的：

$(document).ready(function() {
    animateDiv();
    runIt();
});

function makeNewPosition($container) {
    // Get viewport dimensions (remove the dimension of the div)
    $container = ($container || $(window));
    var h = $container.height() - 50;
    var w = $container.width() - 50;

    var nh = Math.floor(Math.random() * h);
    var nw = Math.floor(Math.random() * w);

    return [nh, nw];
}

function animateDiv() {
    var $target = $('.a');
    var newq = makeNewPosition($target.parent());
    var oldq = $target.offset();
    var speed = calcSpeed([oldq.top, oldq.left], newq);

    $('.a').animate({
        top: newq[0],
        left: newq[1]
    }, speed, function() {
        animateDiv();
    });
}

function calcSpeed(prev, next) {
    var x = Math.abs(prev[1] - next[1]);
    var y = Math.abs(prev[0] - next[0]);

    var greatest = x > y ? x : y;

    var speedModifier = 0.1;

    var speed = Math.ceil(greatest / speedModifier);

    return speed;
}

function runIt() {
    var $fading = $('.a');
    $fading.fadeTo("fast", Math.random(), runIt);
}

Answer 1

要使它们独立制作动画，您只需要在不同元素上应用动画即可。我创建了另一个div（ .wrapper ）来改变它的位置，而它的子（ .a ）改变了它的不透明度。

以下是新的HTML：

<div id="container">
    <div class='wrapper'>
        <div class='a'></div>
    </div>
</div>

jsFiddle Demo

Answer 2

jsFiddle Demo

我也随机化了褪色速度。我认为可以做更多的事情，包括随机化缓和效果，底部的一些彩色灯光和移动速度。总的来说，这是一个非常光滑的小演示！

<强>的jQuery

$(document).ready(function () {
    animateDiv();
    makeItSo();
});

function makeNewPosition($container) {
    // Get viewport dimensions (remove the dimension of the div)
    $container = ($container || $(window));
    var h = $container.height() - 50;
    var w = $container.width() - 50;
    var nh = Math.floor(Math.random() * h);
    var nw = Math.floor(Math.random() * w);
    return [nh, nw];
}

function animateDiv() {
    var $target = $('.warp');
    var newq = makeNewPosition($target.parent());
    var oldq = $target.offset();
    var speed = calcSpeed([oldq.top, oldq.left], newq);
    $target.animate({
        top: newq[0],
        left: newq[1]
    }, speed, function () {
        animateDiv();
    });
}

function calcSpeed(prev, next) {
    var x = Math.abs(prev[1] - next[1]);
    var y = Math.abs(prev[0] - next[0]);
    var greatest = x > y ? x : y;
    var speedModifier = 0.1;
    var speed = Math.ceil(greatest / speedModifier);
    return speed;
}

function makeItSo() {
    var $fading = $('.ufo');
    $fading.fadeTo((Math.random() * 400), Math.random(), makeItSo);
}

<强> CSS

div#container {
    height:500px;
    width:100%;
}
div.ufo {
    width: 284px;
    height:129px;
    background:url(http://www.themasterbetas.com/wp-content/uploads/2013/08/aliens.png);
    position:fixed;
}
div.warp {
    width: 284px;
    height:129px;
    position:fixed;
}

<强>标记

<div id="container">
    <div class="warp">
        <div class='ufo'></div>
    </div>
</div>

Opacity +随机移动的随机时间

2 个答案: