不透明度+随机移动的随机计时

Random timing for Opacity + Random movement

本文关键字：随机 移动 不透明度      更新时间：2023-09-26

我正在尝试创建div的随机移动（成功），与随机不透明度变化联系在一起（部分成功）。我将两个独立的脚本混合在一起，形成了以下内容。

不透明度只有在潜水器每次移动后才会改变。最终，我想让不透明度独立于移动。任何帮助都将不胜感激！

我在jsFiddle这里有，或者：

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

要使它们独立设置动画，只需将动画应用于不同的元素即可。我创建了另一个div（.wapper），它改变了它的位置，而它的子div（.a

这是新的HTML:

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

jsFiddle演示

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>
相关文章：