2

ランダムな不透明度の変更（部分的に成功）に関連付けられた、divのランダムな動き（成功）を作成しようとしています。2 つの別々のスクリプトを 1 つにまとめることで、次のようにまとめました。

不透明度は、div の各移動後にのみ変更されます。最終的には、動きとは独立して不透明度を機能させたいと思います。どんな助けでも大歓迎です！

私はそれをjsFiddle hereに持っています、または：

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

2 に答える 2

1

それらを個別にアニメーション化するには、異なる要素にアニメーションを適用するだけです。その位置を変更する別の div ( .wrapper ) を作成しましたが、その子 ( .a ) は不透明度を変更します。

新しい HTML は次のとおりです。

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

jsFiddle デモ

于 2013-08-20T06:26:05.680 に答える
0

jsFiddle デモ

フェード速度もランダム化しました。イージング効果のランダム化、下部の色付きライト、移動速度など、これでさらに多くのことができると思います。全体として、これは非常に洗練された小さなデモンストレーションです。

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>
于 2013-08-20T06:54:27.903 に答える