如何在一个容器内使用动画?

我是HTML,CSS和javascript领域的新手。 目前,我正在创建一个网站,该网站的着陆页上会有一些形状(以CSS创建)以随机方式移动。 当我添加一个新容器时,就会出现问题,动画也会在这个新容器中继续进行。

这里是我要保留动画的HTML代码:

<div class="container-fluid">

    <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script><script  src="./script.js"></script>

    <div class="row">

        <div class="col">
          <img class="mx-auto d-block img-fluid" src="./images/rope-landing-page.png" alt="rope" style="height: 100vh;">
        </div>

        <div class="col-6 text-center">
          <div class="p-5"></div>
            <h1 class="title">Charity in a selfish society</h1>
            <div class="p-2"></div>
            <h2 class="sub-title">Analysis during COVID-19 pandemic in Italy</h2>
            <div class="p-lg-5"></div>
            <h3 class="text-monospace"> € 715,86 mld </h3>
            <div class="p-4"></div>
            <p class="text-body">Total money raised in Italy by foundraising during the COVID-19*</p>
        </div>

        <div class="col">
        </div>

    </div>

这是Javascript

$(document).ready(function(){
    animateDiv(".blue_square");
    animateDiv(".seagreen_square");
    animateDiv(".salmon_square");
    animateDiv(".turquoise_square");
    animateDiv(".blueviolet_square");

    animateDiv(".red_circle");
    animateDiv(".coral_circle");
    animateDiv(".pink_circle");
    animateDiv(".grey_circle");
    animateDiv(".lightblue_circle");

    animateDiv(".orange_triangle");
    animateDiv(".green_triangle");
    animateDiv(".yellow_triangle");
    animateDiv(".crimson_triangle");

    animateDiv(".green_rectangle");
    animateDiv(".burlywood_rectangle");
    animateDiv(".purple_rectangle");
    animateDiv(".deeppink_rectangle");
});

function makeNewPosition(){

    var h = $(window).height() - 50;
    var w = $(window).width() - 50;

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

    return [nh,nw];    

}

function animateDiv(myclass){
    var newq = makeNewPosition();
    $(myclass).animate({top: newq[0], left: newq[1]}, 2000,   function(){
      animateDiv(myclass);        
    });
}; 

我认为一种解决方案可能是使用画布,但是我还不知道如何使用它。 谢谢!

评论