次のウェブの「人々を幸せにする」セクションのようなアニメーションを作成する必要があります。
しかし、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から提供された例のように、同時に回転する画像が増えるでしょう。
この特定の効果を得るためのアドバイスや例を教えてください。
前もって感謝します。