問題タブ [skrollr]

Skrollr.jsライブラリを使用して、ページ上で視差スクロールを実行しています。ライブラリはデータセットを使用して、（スクロール位置に基づいて）開始および終了のcssコードを指定します。例：

いくつかの要素を動的に作成し、それらのデータセットを設定する必要があります。たとえば、要素が次のようになっている場合は次のようになります。

これはうまくいくでしょう：

しかし、名前に整数を使用するライブラリ（data-0）を使用しているため、スタックしています...これを試しました：

と...

運がない...他のアイデアはありますか？

私はskrollr プラグインで遊んでいますが、私が望むものを達成できないので、助けを求めています. 私は次のような簡単な効果を実装することができました<div id="intro-left" data-0="opacity: 0" data-180="opacity: 1">(ユーザーが 180 までスクロールすると、intro-left と呼ばれる私の DIV が表示されることを意味します)

問題は、スクロール距離を使用したくないということです。これは、誰もが同じ画面解像度を持っている場合にのみ意味があるからです。

私がやりたいことは、skrollr に次のように伝えることです:ページを下にスクロールしてください）

これは skrollr で達成できますか?

どうもありがとう

skrollr を使用してページを作成していますが、うまく機能します。Chrome、Firefox、および IE で正常に動作しています。ただし、Mac バージョン 10.7.5 上の Safari 6.0.5 では、スクロール時に要素のアニメーションが非常に途切れます。基本的に、下にスクロールしてもキーフレームはアニメーションしません。代わりに、スクロールした場所に応じて特定のキーフレームにスキップします。Safariでのみこれを行う理由がわかりません。申し訳ありませんが、NDA のため、サイトへのリンクを掲載できません。これに関するヘルプや提案は大歓迎です。

RequireJS を使用して skrollr と skrollrMenu を使用すると、エラーが発生します。これは私の main.js ファイルです:

ページをロードするとUncaught TypeError: Cannot call method 'relativeToAbsolute' of undefined、skrollr.menu ファイルのこの時点でエラーが発生します。

次に、 の出力が続きますconsole.log(s)。skrollr.menu.initこれは が前に実行されていることを意味しconsole.log(s)ますか?

skrollr を使用して、モバイル ブラウザーの CSS 固定背景画像の問題を回避しようとしています。ここで、1 つの背景画像と skrollr を使用してドキュメント スキーマの簡易バージョンを作成しました: http://lkoren.github.io/2013/10/16/skrollrTest.html

ファイル構造は

私の 2013 Nexus7 では、skrollr は Opera と Chrome には影響しません。FireFox では、多くの固着やスタッタリングが発生する傾向があります。

デスクトップの FireFox と Chrome では問題なく動作します。設定することで実際に何かをしていることを確認しました

視差効果を得ます。