0

次のウェブの「人々を幸せにする」セクションのようなアニメーションを作成する必要があります。

https://layervault.com/

しかし、8の形を作る代わりに、私は単純な円を作る必要があります。CSS3を使用して作成されていますが、jQueryでも実行できます(目的の結果が得られれば、テクニックは気になりません)。

jQueryでコード化された同様の効果をもたらすこのコードを見つけました:

var t = 0;

function moveit() {
t += 0.05;

var r = 100;
var xcenter = 100;
var ycenter = 100;
var newLeft = Math.floor(xcenter + (r * Math.cos(t)));
var newTop = Math.floor(ycenter + (r * Math.sin(t)));

$('.rotate').animate({
    top: newTop,
    left: newLeft,
}, 1, function() {
    moveit();
});
}

$(document).ready(function() {
    moveit();
});

jsfiddleでそれを参照してください:http: //jsfiddle.net/W69s6/810/

しかし、ご覧のとおり、この例では連続ループを実行しているため、画像をジャークして移動したいと思います。つまり、毎秒停止して開始します。

また、この投稿の冒頭でlayervault.comから提供された例のように、同時に回転する画像が増えるでしょう。

この特定の効果を得るためのアドバイスや例を教えてください。

前もって感謝します。

4

2 に答える 2

1

彼らのサイトでは、CSS3 アニメーションを使用しています (すべての適切なベンダー プレフィックスを使用)。Chrome の Web コンソールを使用して、アニメーション要素の 1 つを選択しました。プロパティがあることがわかりanimation nameます。

その名前@keyframesは、CSS ファイルのディレクティブに対応しています (これにもベンダー プレフィックスが必要です)。

ここここにいくつかの情報があります。

于 2013-03-14T20:16:31.990 に答える
0

遅延を追加して、目的の効果を得ることができます

$('.rotate').delay(1000).animate({
    //rest of code
}....
于 2013-03-14T20:07:26.617 に答える