0

DIV一緒に移動しJSてページの右側に配置する 3 つの s を作成しようとしています。アニメーション スクリプトを実行しましたが、位置が正しくありません。携帯電話では、#headerセクション内の他の div よりも上にあり、左側にあります。そして、その上PC:sは左から遠く離れています。アニメーションをこのように維持する方法はありますか? 携帯電話と PC の位置が変わらないようにするには？

HTML:

  <div class="wrapper">
    <div id="intro-right">
       <div id="clouds-1"></div>
       <div id="clouds-2"></div>
       <div id="clouds-3"></div>
    </div>
  </div>

CSS:

div.wrapper {
    margin: 0 auto;
    padding: 0 20px;
    min-width: 1024px;
    width: 1024px;
}

div#intro-right {
    float: right;
}

div#clouds-1 {
    position: absolute;
    width: 420px;
    height: 260px;
    margin-top: 100px;
    right: 150px;
    background: url("img/clouds_bg_1.png") no-repeat;
    opacity: 0;
}

div#clouds-2 {
    position: absolute;
    width: 420px;
    height: 260px;
    margin-top: 110px;
    right: 150px;
    background: url("img/clouds_bg_2.png") no-repeat;
    opacity: 0;
}

div#clouds-3 {
    position: absolute;
    width: 420px;
    height: 260px;
    margin-top: 130px;
    right: 150px;
    background: url("img/clouds_bg_3.png") no-repeat;
    opacity: 0;
}

JS:

$(document).ready(function() {
    $("div#clouds-1").animate({
        opacity:'0.4'
    }, 1450);

    $("div#clouds-2").animate({
        opacity:'0.6'
    }, 1450);

    $("div#clouds-3").animate({
        opacity:'0.8'
    }, 1450);
});

$(document).ready(function() {
    function moveRight1() {
        $("div#clouds-1").animate({
           top:'-=24px',
           right: '+=50px',
           opacity: '0.9'
        }, 8000, moveLeft1);
    }

    function moveLeft1() {
        $("div#clouds-1").animate({
            top:'+=24px',
            right: '-=50px',
            opacity: '0.4'
        }, 8000, moveRight1);
    }
    moveRight1();

    function moveRight2() {
        $("div#clouds-2").animate({
           top:'-=24px',
           right:'-=50px',
           opacity: '0.9'
        }, 8000, moveLeft2);
    }

    function moveLeft2() {
        $("div#clouds-2").animate({
            top:'+=24px',
            right:'+=50px',
            opacity: '0.6'
        }, 8000, moveRight2);
    }
    moveRight2();

    function moveRight3() {
        $("div#clouds-3").animate({
           top:'+=24px',
           right:'+=100px',
           opacity: '0.4'
        }, 8000, moveLeft3);
    }

    function moveLeft3() {
        $("div#clouds-3").animate({
            top:'-=24px',
            right:'-=100px',
            opacity: '0.8'
        }, 8000, moveRight3);
    }

    moveRight3();
});
4

2 に答える 2

1

pixelcdv が言ったように、CSS3 アニメーションは、このような単純な動きに最適です。

これは私があなたのコードを使って思いついた簡単なアニメーションです（すべてパーセントで）

あなたのhtmlに基づいたCSS：

div#clouds-1 {
    position: absolute;
    width: 30%;
    height: 20%;
    top: 15%;
    left: 35%;
    background: url(http://www.drawingcoach.com/image-files/cartoon_clouds_2.gif) no-repeat;
    opacity: .9;
    -webkit-transition: cloudOne 16s infinite;
    -moz-transition: cloudOne 16s infinite;
    -o-transition: cloudOne 16s infinite;
    transition: cloudOne 16s infinite;
    animation: cloudOne 16s infinite;
}
@keyframes cloudOne {  
    0% {
        top:15%;
        left: 35%;
    }
    50% {
        top:7%;
        left: 20%;
    }
    100% {
        top:15%;
        left: 35%;
    }
}

div#clouds-2 {
    position: absolute;
    width: 30%;
    height: 20%;
    top:20%;
    left: 45%;
    background: url(http://asnika.info/wp-content/uploads/2013/04/drawing-of-cloudscartoon-clouds-drawing-techniques-fauprla4.gif) no-repeat;
    opacity: .9;
    -webkit-transition: cloudTwo 16s infinite;
    -moz-transition: cloudTwo 16s infinite;
    -o-transition: cloudTwo 16s infinite;
    transition: cloudTwo 16s infinite;
    animation: cloudTwo 16s infinite;
}

@keyframes cloudTwo {  
    0% {
        top:20%;
        left: 45%;
    }
    50% {
        top:35%;
        left: 15%;
    }
    100% {
        top:20%;
        left: 45%;
    }
}

div#clouds-3 {
    position: absolute;
    width: 30%;
    height: 20%;
    top:30%;
    left: 50%;
    background: url(http://www.how-to-draw-cartoons-online.com/image-files/cartoon_clouds.gif) no-repeat;
    opacity: .9;
    -webkit-transition: cloudThree 16s infinite;
    -moz-transition: cloudThree 16s infinite;
    -o-transition: cloudThree 16s infinite;
    transition: cloudThree 16s infinite;
    animation: cloudThree 16s infinite;
}

@keyframes cloudThree {  
    0% {
        top:30%;
        left: 50%;
    }
    50% {
        top:5%;
        left: 65%;
    }
    100% {
        top:30%;
        left: 50%;
    }
}
于 2013-08-08T17:03:41.583 に答える