問題タブ [skrollr]

トリガーを使用して個別にアニメーション化する 2 つの列があります。私が理解しているように、Skrollr は 1 つのページで 1 つのインスタンスしか許可しません。オフとオンを切り替えることができる複数のインスタンスを持つことが可能かどうかは誰にもわかりませんか?

ここで実際の例を開始しました：

• 灰色の列は、「Activate!」をクリックすると Skrollr インスタンスをアクティブにします。ボタン。(「Destroy!」ボタンはそのインスタンスを削除します。)
• Skrollr アニメーションを灰色の列だけに分離したいのですが、この例でわかるように、黄色/オレンジ色の列もアクティブになっています。

そこで、Prinzhorn skrollrを使用して、ページのスクロールまたはスワイプに合わせてテキストと画像が表示されるサイトを作成しています。すべて正常に動作しますが、パフォーマンスのバグを見つけたと思います。skrollr が機能する方法は、名前として数字を持つデータ属性を使用することであり、数字はアニメーションが発生するはずのポイントです。データ属性の値は CSS ルールです。

display:none画面サイズに応じて非表示または表示されるいくつかのコード ブロックを使用する必要があります。これは、データ属性の数値がモバイル画面に対して大きすぎる場合があり、アニメーションが間違ったタイミングで発生するためです。

とにかく、問題は、ブロックが に設定されている場合でも、非表示のコード ブロックの css が計算されることdisplay:noneです。

以下のコードでは、モバイル ナビゲーション ブロックの不透明度が、デスクトップの幅で Chrome の開発ツールで再計算されていることがわかります。

これを防ぐ方法について何か考えはありますか？私が言ったように、すべてがうまく見えてうまくいきますが、私はモバイルでいくつかの小さな遅れに気づいています.デバイスが同じ計算を2回しなければならないのはb/cだと思います.

Skrollr でアニメーションを一度実行してから、それを強制終了するにはどうすればよいですか?

私はもう試した：

• メソッドですが、beforerenderすべてのアニメーションを強制終了します
• 個々の Skrollr インスタンスを設定する方法を探していますが、それはシングルトンです
• オブジェクトの削除または名前変更attributes
• nullオブジェクトのclassName
• CSS クラスの切り替え

毎回、私の努力に関係なく、値が Skrollr 内にキャッシュされ、発火しているように見えます。ここで何が欠けていますか？

私は現在、Skrollr を使用する Web サイトを作成していますが、完了できないことが 1 つあります。ウェブサイトを一番下にロードしたい。通常のスクロールを伴う登録フォームがあり、送信ボタンをクリックした後にのみ、Web サイトのコンテンツを上に移動して Skrollr の効果を確認することができます。skrollrでこれを行う最良の方法は何ですか?

Skrollr.js を使用して画像シーケンスをアニメーション化しています。http://moto.oakley.comサイトが画像シーケンスを処理する方法から着想を得て、DOM への一連の画像の書き込みを自動化するためのスクリプトを作成しました。次に、Skrollr を使用して、主要なスクロール位置でdisplay:none;toを変更します。display:block私のスクリプトは、完全なイベントをディスパッチする前にすべての画像をプリロードしてから、Skrollr を初期化して対話を許可します。

だから、基本的に私は<div>これらの束を持つ包含を持っています:

現在、これは Chrome と FireFox では (当然のことながら) 正常に機能していますが、Internet Explorer 11 では、ページを最初にスクロールするときに画像のレンダリングに問題があるようです。つまり、最初にページを読み込んでスクロールすると、プリロードされていないように画像が点滅しますが、その後のスクロールではアニメーションはまったく問題ありません。IE11 が画像をメモリにレンダリングしていないようなので、最初に画像が表示されるときに画面への描画速度に遅延が生じます。

Skrollr が問題だとは思いません。おそらく、私が使用すべき魔法の CSS 設定がいくつかあります。

Internet Explorer でも常に非常に滑らかに見えるように、画像シーケンスを作成するためのヒントはありますか?!?

ありがとう！

私はskrollr.jsを使用しています... http://roy-coy.in

ウェブサイトをスクロールして表示したい

roy-coy.in/index.php#scene-01

私が間違っていなければ

この URL は id="scene-01" の要素に移動するはずですが、そうではありません。代わりに、ホームページに移動します

つまり、上に...

ここにhtmlコードがあります：

簡単にデバッグできるように、不要なコンテンツを削除しました.....

ただし、ここに完全な index.php ファイルがあります

https://www.dropbox.com/s/mchuzi2em2cumoa/index%20-%20Copy.php

私はこのサイトhttp://andreas-berg.dk/wordpress/で作業しています- すべての六角形のセクション内で、背景画像に視差効果を設定しました。こちら: https://www.dropbox.com/s/swi9zab8nn5l1hj/Screenshot%202014-04-14%2010.12.22.png

ブラウザー ウィンドウが最大の場合は何もありませんが、ウィンドウのサイズを 1 ピクセルに変更するとすぐに、背景画像が押し下げられます。これが起こる原因は何ですか？サイズを変更してブラウザを更新すると問題なく動作しますが、ブラウザのサイズが変更され、ユーザーフレンドリーではないことをすべて行うのはばかげています。

私は現在、Twitter Bootstrap フレームワークを試しており、Skrollr プラグインを使用してすばらしい視差効果を実現しています。しかし、タブレットやスマートフォンで自分のウェブサイトを見ているときに、スクロールに問題があります。モバイル デバイスで Web サイトをスクロールできない原因となる小さな JavaScript コードがあることに気付きました。

この小さなコードを削除すると、ウェブサイトが突然スクロール可能になりますが、さまざまな視差プレートが消えます。誰もこの問題を抱えていますか?この問題の解決策はありますか?

解決策：（コメントとヘルプのtnx）

Skrollr を使用して小さなトランジションと動きを作成する方法を学ぼうとしています。

1 つの要素を変換した後、それをページの上部に移動します。

HTML:

CSS:

JS:

transform-origin: 0 0 を使用するとうまく動作します (top は変更されません) が、デフォルト (transform-origin: 50% 50%) を使用すると要素の上部の位置が変更され、top: -XX を使用する必要があります。 % 要素を 0% の位置に配置します。

解決策は次のように呼び出すことだと思います：

コード内でコメントしたように（またはs.refresh（））、コード内でそれは機能せず、私の要素は上部の近くにいくつかのピクセルを移動するだけです。

別の場所または別の方法で refresh() を呼び出す必要がありますか?

ありがとう！

編集：

例 1 - 1 つの要素を一番上に移動する (問題なし)

http://cokeperez.com/stack1.html

例 2 - 要素を拡大縮小して上に移動 (要素は上に移動しません)

http://cokeperez.com/stack2.html

例 3 - 要素をスケーリングし、値を調整して上部に移動します (完全ではありませんが、機能します)。

(stack3.html と同じリンク、2 つ以上のリンクを投稿することはできません)