9

私は過去にscrolldeck.jsを使用していくつかのサイトを作成しましたが、標準のフルスクリーンの背景に1つのレイヤーがあり、テキスト（標準のスクロール視差スタイル）があります。これは私が探しているものではありません。

スクロールしながらフォアグラウンドで単一のdivタグ（画像）をアニメーション化/移動するためのスクリプトまたはチュートリアル（または例）を探しています。これを1ページの縦スクロールサイトで使用するので、スクロールするときに、奇妙な画像を別の速度でスクロールして開始位置と停止位置を設定します。視差の背景全体は必要ありません。

事前にたくさんありがとう

編集：これは私が探しているもののより良い説明です：

ページを下にスクロールすると、ボトルが浮かんでいるのがわかります（透明なpng）。コンテンツを読んで下にスクロールし続け、ある時点で、ボトルがテーブル（背景の一部）にうまく収まるようにスクロールし続けます。もう動かない。

目標は、要素（画像）を（スクロールに基づいて）事前に決定された位置に移動し、最終的な静止位置に到達したらそのままにしておくことです。

編集2：ここにいくつかのサンプルサイトがあります：http：
//jessandruss.us/-このサイトは、この時点で私が望むことを正確に実行します：スクリーンショット
http://smokeybones.com/を参照してください-ハンバーガー私が望む効果はかなりうまくいきますが、最小限ですが、スクロールすると所定の位置に移動します。

4

5 に答える 5

7

あなたのコメントに基づいてbut hopefully at a different pace then the actual page scrolls creating a parallax effect.-私はその効果をシミュレートしようとしました。

基本的に、移動するオブジェクトはページがスクロールするのと同じ速度で移動しますが、ビューポート（表示領域）に比例して異なる距離をカバーします

ここにデモ。

注：マウスホイールの代わりにスクロールバーハンドルを使用してください。

于 2012-08-24T17:04:29.410 に答える
7

http://prinzhorn.github.com/skrollr/

このライブラリは、ネイティブjavascript（jQueryなどは不要）の視差スクロールプラグインです。プラグインのホームページには、探しているものの実際のデモがあります。Githubリポジトリはこちらです。

于 2012-08-30T14:26:38.207 に答える
1

https://victoriabeckham.landrover.com/INTのソースを確認する必要があり ます。 基本的には、達成したい視差効果を与えるいくつかのcssプロパティを処理する「プレーヤー」です。主に背景の位置の問題ではありません-そのような処理を行う必要がある要素は、

于 2012-08-27T11:01:01.023 に答える
0

私はあなたがこの本から利益を得ると思います：それはたくさんのチュートリアルと有用な情報を持っているSuperchargedJavascriptGraphicsです。私は個人的にそれから多くを学びました。ここにあなたの食欲を濡らすための本からの例の1つへのリンクがあります。そして、あなたはここでもっとクールなもののために著者のウェブサイトを訪問することができます。

于 2012-08-24T16:57:26.497 に答える
0

jQuery Transeにチャンスを与えましょう。いくつかの非常に単純なデモがあり（ドキュメントはまだありません）、タッチデバイスでも機能します。ただし、これは初期のベータ版であると言わざるを得ないので、注意してください。

ところで：それは8.682kbしかありません

于 2012-12-30T15:11:20.927 に答える