3

これまでのSOに関する最初の投稿:)

css3+javascriptを組み合わせた視差ウェブサイトを作成しています。

私はこのチュートリアルに従いました、そしてそれは私に主題についてかなりの把握を与えたと言わなければなりません。

私はちょうど2つのことを考えていました：

  1. X軸の動きをどのように変換しますか？
  2. 最も重要：ユーザーのスクロールとアニメーションを組み合わせるにはどうすればよいですか？

そこにはたくさんのプラグインがあるのを見てきましたが、コードを重く複雑にしすぎずに、自分でソリューションを開発したいと思います。このテクニックについて教えてくれる良いリソースを教えていただけますか？

君たちありがとう！

17/09/12 14.14（+1 GTM時間）に編集誰かが興味を持った場合、それは私たちがトリックを行うためのアイデアコードでなければなりません：

$（document）.ready（function（）{$（'section [data-type = "example"]'）。scroll（function（）{

// If the user scroll as much as we need, in this instance 750px
if (scrollTop() > '750px') {
  // switch its class from ".animation" to ".animated" 
  $(".animation").toggleClass("animated"); 
}

}）; }）;

CSSクラスは次のようになります。.animation{width：300px; 高さ：300px：-webkit-transition：幅2秒の使いやすさ、高さ2秒の使いやすさ。-moz-transition：幅2秒で簡単、高さ2秒で簡単。-o-transition：幅2秒で簡単、高さ2秒で簡単。-ms-transition：幅2秒で簡単、高さ2秒で簡単。トランジション：幅2秒で簡単、高さ2秒で簡単。}

.animated {幅：400px; 高さ：400px; }

ご覧のとおり、「。animation」では初期サイズとアニメーションを見つけ、「。animated」では達成したいものを印刷します。

これは、@jfriend00によって提供されたヒントのおかげで作成されました。残念ながら、まだ試すことができなかったので、お気軽に改善してください。誰かがこのトピックに興味を持っているように見えるので、ここに書きました。以前はコメントで投稿して読めなくなっていました:)

また、Jfriend00は、.scrollTop（）はJQueryメソッドであり、単純な関数ではないと述べています。プレーンJSを使用してどのように改善できると思いますか？

事前に感謝し、私の文法エラーと素朴さをお詫びします。私は英語を母国語とはしておらず、プログラミングはまったく新しいです:)

4

1 に答える 1

1

あなたのコメントから：

たとえば、ユーザーのスクロールを遷移効果に組み合わせたいとしましょう。つまり、ユーザーが 750px スクロールしたら、フェード トランジションでオブジェクトを表示したいと考えています。スクロール要素をアニメーションにリンクするにはどうすればよいですか?

これは、その特定の例にアプローチする 1 つの方法です。

  1. スクロール イベントのイベント リスナーを登録します。
  2. スクロール イベント ハンドラーでは、現在のスクロール位置を調べて、アクションを実行するかどうかを決定します (例: scrollTop750px 以上)。
  3. CSS3 アニメーションをトリガーする最も簡単な方法は、オブジェクトにクラス名を追加することです。オブジェクトにその新しいクラス用に割り当てられた CSS があり、クラス名をオブジェクトに追加することによって変更されるプロパティのいずれかで CSS トランジション用にオブジェクトが構成されている場合、クラスが追加されると CSS3 アニメーションが開始されます。
于 2012-09-17T05:42:41.537 に答える