4

CSS3 の使用 CSS ベースの Ken Burns エフェクトが機能しない理由がわかりません。私の最初の試みは、Jquery を使用して新しいクラスを背景画像に追加することでした。

.flare1 {
    background-position:-50.1px -50.1px !important;
    -webkit-transition: all 5s ease-in-out;
}
function gallery() {
    $('.cornerimg').addClass('flare1');
}

これは機能しましたが、恐ろしくぎくしゃくしています。なので別の方法を検討中です。最初から授業アニメーションで映像を設定していたらどうだろう。私は CSS3 アニメーションに精通しておらず、トランジションのみに精通していますが、その目的は一連の画像に恒久的なクラスを適用して、Ken Burn を常にスムーズにすることです。

挑戦したい人のために素敵な実験場を用意しました。 http://jsfiddle.net/gxUhH/10/

私の初期コードに基づいてすべて設定されています。

何か案は？

素晴らしい

編集 -

非常にスムーズに見えるこれを見つけました。私が見ることができないのは、何が違うのかということです。彼らは代わりに web-kit の翻訳機能を使用していますが、私がそれを試したところ、ジャンプしました。見てください。http://thing13.net/2010/02/css3-ken-burns-effect-2/

4

4 に答える 4

3

背景は一度に最低1ピクセルしか移動できないため、動きがぎくしゃくします。これをテストするには、background-positionを10pxに設定し、遷移時間をに設定し10s linearます。1秒に1回、画像が正確に1ピクセルシフトすることがわかります。

1ピクセルはあまり聞こえないかもしれませんが、ゆっくりと移動しているときはかなり目立ちます。

私の解決策は、画像をより速く移動することです。滑らかに見えるモーションの最低速度は、少なくとも1秒あたり20ピクセルです。

残念ながら、ブラウザがハードウェアアクセラレーションを実装するまでは、背景画像でリアルタイムのサブピクセルリサンプリングを取得できない可能性があります。

于 2011-06-23T18:10:41.143 に答える
0

CSSに対してこのようなことを行うことができます。（必要に応じてカスタマイズ）

#gallery .imageitem {
    width:680px;
    height:380px;
    overflow:hidden;
    background-position:0px 0px;
    background-repeat:no-repeat;
}
.flare1 {
    -moz-animation-duration: 1.5s;
    -webkit-animation-duration: 1.5s;
    -moz-animation-name: slide;
    -webkit-animation-name: slide;  
    -moz-animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    -webkit-animation-timing-function: linear;
    -moz-animation-direction: alternate;
    -webkit-animation-direction: alternate;
}

@-moz-keyframes slide {
  from {
    background-position: 0px;
  }

  to {
    background-position: -100px;
  }
}

@-webkit-keyframes slide {

  from {
    background-position: 0px;
  }

  to {
    background-position: -100px;
  }
}
.cornerimg {
    width:680px;
    height:380px;
}

http://jsfiddle.net/gxUhH/23/

于 2011-06-23T18:10:35.437 に答える
0

backgroundPosition jQuery pluginを使用するprotofuncのコードで簡単なハックを試みました。プラグインを使用すると、次のように背景の位置を制御できます。

$(this).animate({'background-position': '500px 150px'})

小さなdivの背景画像として巨大なJPGを配置しました。次に、アニメーションをクリックしてトリガーしたり、コールバック イベントを介してスタックしたり、jQuery が実行できる通常のすべての操作を実行したりできます。そして、私のマシンの Chrome では非常にスムーズに動作します。

あなたの質問を読み直した後、それはCSS3を使用していません...非常に役立つ答えではありません! ：P

于 2011-06-23T18:10:58.097 に答える
0

チャップスは私に方法を尋ねませんが、キーフレームアニメーションを介してスムーズになりました. http://jsfiddle.net/gxUhH/47/

ただし、1 つだけ問題があります。タッチスクリーンデバイスでスクロールすると、ページがぎくしゃくします。スクロール中に一時停止し、スクロールが終了したらもう一度再生する必要があると思います。

何か案は？

于 2011-06-24T11:12:43.723 に答える