問題タブ [skrollr]

私は現在視差で遊んでいて、問題があります:

ここにマークアップがあります

そしてCSS：

JSFiddle

Safariを除くすべてのブラウザですべて問題ないようです（デスクトップ、iOSも問題ありません）

「スクロール」矢印を押した後、Safariのスクロールアニメーションがかなり遅くなります。また、position: fixed; を使用した場合にのみスクロール ラグが発生することにも気付きました。

多分誰かが私がどこを掘るべきか手がかりを教えてくれるでしょうか?

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

私は自分のアイデアでいくつかのプロジェクトを完成させなければなりません。

必要なすべての機能と動作を確認できるビデオを次に示します。

これは、私が学んでいる会社のスタッフによって作成された進行中のバージョンです: podpiwekjedrzej.com.

これが私の進行中の現在のバージョンです。

私自身のアイデアと選択したツールを使用して、上記のビデオからこれらの効果を作成する必要があります。垂直および水平スクロールのフルスクリーン スライダー サイト用の FullPage.js を見つけました。スクロールされたオブジェクトについては、Skrollr.js を見つけました。

今：

FullPage.js がなくても、Skrollr はうまく機能します。Android を搭載したタブレットでは現在のバージョンが動作し、PC ではブラウザー ウィンドウのサイズを非常に小さいサイズに変更したときに動作しますが、その後はキーボードでのみ動作します。また、メニューの動きをアニメーション化する必要があります。これにはどのツールが適していますか? すべてが応答する必要があります。

主要な機能が私を止めているので、このプロジェクトを進めることができません。

jQuery と JS について学び始めたばかりなので、まだ自作のコードを作成することはできません。

助けてください。

<nav>ユーザーが最初の「ブロック」( ) を通過した後、 が固定されるようにしたいheight: 100%;。Skrollr を使用することにしたのは、モバイルと IE でバグがなく、すぐに「変更」できる唯一の方法であるためです。だから私はこれをしました：

ページのサイズを変更するまで、これはうまく機能します (<nav>は の直後です)。<header>だから私はこれをしました：

新しい高さを取り、それを属性として追加し、他のすべての属性を削除します（そうでない場合は、データ-500、データ-501、データ-502、データ-503...）を追加し、見てコードで - それはうまくいきます。問題は、Skrollr が変更を「認識」しないことです。私は何をすべきか？

こんにちは、レスポンシブ サイトで skrollr を使用しようとしています。モバイルではオフにしてから、テーブル/デスクトップではオンに戻したいだけです。このエラーが発生し続けます: Uncaught TypeError: Object # has no method 'destroy'. skrollr の destroy 呼び出しを使用している例を見つけることができなかったので、正しい方向のポイントが役に立ちます。

以下は私が使用しているコードです：

私は数日間 skrollr を処理しようとしてきましたが、一貫性のない結果が得られ続けているようです。この例を非常に単純にするために、位置が固定され、高さと幅が 100% のセクション タグが 1 つあります。

html

CSS:

ビューポートの 200% をスクロールしていないようです。赤いセクションは上にスクロールしますが (100p)、ビューポートの上部で停止し、他にスクロールするものはありません。

現在、Skrollr を使用してパララックス サイトをいじっています。下にスクロールしたときにカーテン効果を作成したいので、2 つの div の左右を「スライド」して開きます。

今私が遭遇する問題は、div を左または右にスクロールすると、ビューポートの外側の 100% 幅の外側に配置されることです。そのため、縦にスクロールできますが、これは望ましくありません。幅をできるだけ広く保つように強制する方法はありますか?

問題を示すコードペン:

http://codepen.io/anon/pen/eKJxs

何か案は？

申し訳ありませんが、私は jquery/js 見習いです。私は skrollr が 590px のトップオフセットで「スティック」に設定された jquery スティッキーナビゲーションセットアップを持っています。これは問題ないように見えましたが、オフセット値を特定の DIV の高さにバインドできるかどうかを知りたいと思っていたので、オフセットを手動で適用する代わりに、いくつかのページでそのオフセットを一意にする必要があることがわかりました。これにより、将来の管理が容易になります。

これが私のコードです：

バインドする必要がある高さの値を持つ問題の DIV には、.custom-hero-background のクラスがあります。

600px のグローバルな高さが適用されていますが、一部のページではこれを独自の高さでオーバーライドしています。

skrollrを使用して、画面の左側 (左: 100%) から左: 25% に div をアニメーション化し、不透明度を 50% から 100% にフェードさせようとしています。このような単純なもの：

不透明度の変更はうまく機能します。ただし、位置の変更は機能していないようです (Chrome、Firefox、および Safari)。テキストは left:0% にしっかりと配置されたままです。足りないものはありますか？