3

私は小さなサイト (~5 ページ、大部分は静的) を作成しようとしており、masshealth.comで達成された移行効果を実装したいと考えています。私はそれを検索しようとしましたが、無駄です。このサイトはスクリプトを 1 つしか使用していないことがわかりました。リンクは複数ページのサイトであることを示していますが、リンクをクリックすると /page ではなく /#page と表示され、実際には 1 つの大きなページの一部であることを示唆しています。

私はそれを完全に学び、実装できるように、この背後にある技術を正確に知りたい.

4

2 に答える 2

3

まず第一に、アニメーションの作成がはるかに簡単になるため、jQuery を使用する必要があります。これがあなたがそれについて行くべき方法です：

  1. ページのコンテンツ全体（すべてのページが1ページであると述べたように、すべて）をラッパーdivに入れます。
  2. このラッパー div の最大幅は 100% で、overflow: hidden にする必要があります。
  3. メイン ラッパー内に 2 番目のラッパー div を作成しますが、この幅はすべてのページの総幅と同じです (または疑似ページなどと言う方が適切です)。
  4. 現在、各ページは 2 番目のラッパー内の div であり、位置は絶対でなければなりません (次に、適切な左位置と上位置を設定する必要があります)。
  5. 2 番目のラッパーの位置も絶対でなければなりません
  6. また、最初のラッパーの位置は相対的でなければなりません。そうしないと、絶対位置がどれも思いどおりに機能しません。
  7. ここで、ページを変更する場合は、jquery を使用して 2 番目のラッパーの x 位置をアニメーション化し、y 方向にscrollToをアニメーション化します。

コードを提供したい場合、非常に長い時間がかかりますが、その背後にある全体のアイデアは次のとおりです (もちろん、そう願っています:D)。

このアイデアの実装に問題があった場合は、教えてください

于 2013-07-11T15:11:50.720 に答える
2

偶然にも、私は今日同じことを研究していました。ここのこのチュートリアルでは、すべてがうまく説明されています。http://www.onextrapixel.com/2010/02/23/how-to-use-jquery-to-make-slick-page-transitions/

于 2013-07-11T21:15:36.747 に答える