問題タブ [translate3d]

投稿のグリッドが読み込まれると、投稿はゼロの位置に読み込まれます。次に、translate3d/width で値を取得すると、適切な場所に移動します: http://www.marianoshoes.com/the-journal/

css を使用して、この奇妙な javascript/css アニメーションを無効にするにはどうすればよいですか?

ありがとう！

グーグルが助けてくれないという問題に遭遇しました。コンテナーに translate3d(0, 0, 0) が適用され、これにより、幅と高さが 100% の内部コンテナーの寸法が破壊されます。これを示すために小さな jsfiddle を作成しました。#page の翻訳を削除すると、寸法は正しいです... http://jsfiddle.net/11vt14nx/1/

HTML部分

CSS

誰かがこれを修正する方法を知っていますか?

前もって感謝します

よろしくトーマス:)

スムーズなトランジションとアニメーションが必要なプロジェクトを行ってきました。私たちは最近、ほぼ 100% の時間を Javascript から CSS アニメーションに移行しました。

translate3d を使用すると、モバイルとデスクトップの両方で非常に滑らかで素敵なアニメーションが提供されることがわかりました。

私の現在のアニメーション スタイルは次のようなものです。

CSS:

最近、話題になっているさまざまなフレームワークを調べ始めました。特定の GreenSock ( http://greensock.com/tweenmax ) と Famo.us ( http://famo.us ) の 2 つ。どちらも素晴らしいフレームレートと素晴らしいパフォーマンスを示しています。

彼らがマルティックス変換を使用していることに気付きました。

Greensock の例 (マトリックスを使用):

Famo.us の例 (3D マトリックスを使用):

私の質問は... translate3d とマトリックスの違いは何ですか? translate3D よりもマトリックスを使用すると大幅に改善されますか? さらに良い結果が得られる別の方法はありますか?

私は translate3D に満足していますが、最も滑らかで最高のアニメーションを提供する方法を学びたいと考えており、それが何であるかについてのガイダンスを探しています。

ページ全体の背景画像と CSS アニメーションに問題があります。アニメーションをどのように最適化しようとしても、背景画像の上では常に遅くなります (60 fps のしきい値をはるかに超えます)。csstranslate3dプロパティを使用してオブジェクトを移動します。背景画像を削除すると、すべてが非常にスムーズかつ高速に実行されます。

こんにちは、ここで見られるように、ヘッダー画像への影響を探しています: http://www.gamebreaker.tv/news-main/david-lynch-leaving-twin-peaks-revival/

作り方のコツは？または、これに対する解決策はありますか？

フルページ スライダーを提供するライブラリである fullpage.js を使用して、非常にトリッキーな問題があります。スライダーにタイトル (h1) 付きの背景画像を含めたい。さらに、背景とタイトルの間に、スライドしない透明な画像をオーバーレイとして配置したい（絶対位置で）。

z-index を 2 に設定することでタイトルをオーバーレイの上に移動できますが、完全な page.js は -webkit-transform: translate3d(0px, 0px, 0px); を追加します。変換: スライドするとすぐに 3d(0px, 0px, 0px) をスライダーコンテナーに変換します。これにより、z 値が無視され、タイトルがオーバーレイの後ろに移動します。

transform-style: flat; を試しました。(彼らがここで提案しているように: css z-index lost after webkit transform translate3d )、しかしこれは私にとってはうまくいきません。

この問題を抱えているのは私だけではないことがわかりました( https://stackoverflow.com/questions/27179052/fullpage-js-z-index-lost-after-css3-enabled )。

誰もこれを修正する方法の手がかりを持っていますか?

ありがとう！