8

街の360度ビュー（9000px x 1000px）のJPG画像があります。背景が際限なく回転するページを作成する必要があります。たとえば、ユーザーにウェブカメラを回転させているような印象を与えます。

最初の部分（画像の左から右へのスクロールは非常に簡単です）は、jQuery.animate（...）を使用するだけです。しかし、どうすれば画像の最初にシームレスに戻ることができますか（359度の回転が完了した後）、ユーザーは「ジャンプ」などに気付かないでしょうか。

おそらくウェブ上に例はありますか？

HTML5 / CSS3（webkit）ブラウザーのみを対象としており、最新のjQueryを使用できます。

ありがとうございました。

4

6 に答える 6

11

回転する背景の背後にある主なアイデアは、2 つの画像を描画することです。1 つは画像の幅で(x, 0)、もう1 つは画像の幅です。時間をかけて増やすことができ、リセットするとすぐに. 2 番目の画像は最初の画像とまったく同じ位置に配置されているため、このリセットは視覚的にわかりません。リセット後、最初からやり直すことができるので、回転が無限に見えます。(x - w, 0)wxx === wx = 0

（と仮定して2枚の画像を使用してwidth of container <= width of imageいます。）

たとえば、次のように使用できます。

于 2012-06-23T14:51:36.657 に答える
6

CSS3 アニメーションを使用することで、jquery なしでこれを行うことができます。都市の背景画像がコンテナ上でシームレスに x を繰り返すように設定されていると想定しています。

背景画像を繰り返し可能な画像の幅でアニメーション化するようにキーフレームを設定し、遅延なしで無限にループするように指示します。たとえば、私の漂流雲の画像は幅 1456 ピクセルで、x を繰り返します。

@keyframes DriftingClouds {
    0%      { background-position: 0 0; }
    100%    { background-position: -1456px 0; }
}

#wrapper {
    background: url(/images/clouds.png) repeat-x 0 0;
    animation: DriftingClouds 165s linear infinite;
}

@-webkit-keyframes、@-moz-keyframes、@-o-keyframes、および -webkit-animation、-moz-animation、-o-animation を同じに設定して、FF、Safari、および Chrome をカバーするようにしてください。

http://jsfiddle.net/JQjGZ/

于 2012-09-20T18:48:03.633 に答える
2

人々がプラグインを作成した「画像ステッチング」と呼ばれるソリューションがあります。

http://www.jquery4u.com/plugins/jquery-360-degrees-image-display-plugins/

これはモバイルにも最適です。 http://spritespin.ginie.eu/examples.html

于 2012-06-23T14:54:31.490 に答える
1

Webkit ブラウザーのみをターゲットにしている場合は、CSS3 だけでこれを実現できます。CSS3 には、アニメーションのサポートが組み込まれています。iteration-count プロパティで 'infinite' を指定することにより、アニメーションは永遠に続きます...要点はわかります ;-)

@-webkit-keyframes rotateEndlessly
{
    from 
    {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    to 
    {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

img 
{
    -webkit-animation-name: rotateEndlessly;
    -webkit-animation-duration: 2s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;

}

そしてもちろん、HTML の画像:

<img src="image.jpg" alt="image" />
于 2012-06-23T14:25:40.700 に答える
1

背景位置と jquery animate 関数で遊ぶことができます。例を参照してください。

http://jsfiddle.net/DG8PA/3/

無限の背景を取得し、完全なイベントで 0 から背景の幅までアニメーション化します。背景の位置を 0 に設定し、もう一度アニメーションを起動します。

于 2012-06-23T14:55:08.387 に答える
0

CSS アニメーションを使用して、このような「見回す」効果を実現できます。視差に最適です。

複数の画像を追加してアニメーション化する代わりにleft、背景を設定してアニメーション化することができますbackground-position:

#bgscroll {  
    background:url(/*some nice seamless texture*/);
    -moz-animation-duration: 13s;  
    -moz-animation-name: bgscroll;
    -moz-animation-iteration-count: infinite;
}  
@-moz-keyframes bgscroll{  
    from {background-position: 0 0;}
    to   {background-position: 100% 0;}  
}

これは、新しい Gecko/Chromium ブラウザーで動作します (ベンダー プレフィックスは調整されています)。いじった

于 2012-06-25T00:32:12.347 に答える