あなたはすでに日産ノートのプロモサイトを見たことがあるかもしれませんが、私の意見では、ウェブデザイナーがそれに注意を払うことは価値があります。
非常にシンプルですが、エレガントで独創的なトリック：写真を含む大きなシートは、ページをすばやくスクロールするとアニメーションプレゼンテーションに変わります。
モバイルインターネットでリンクを開かないでください！ ページサイズは20 MB以上です。プロモーションウェブサイトNissan Note効果は素晴らしいです-特に日本のネットワークの品質で、訪問者は間違いなくサイトを好きになるでしょう。
いくつかの技術統計
Google Chromeからの情報によると：
- リクエストの総数：289;
- サイズ：25.98 Mb;
- ラップトップでの読み込み時間：1.3分。
- 「有用な」写真の数：46（私は非常に数えました）。
動作原理
100％の高さと絶対配置のdiv（#container）があり、固定幅のdiv（#frames）が埋め込まれています。 次に、＃framesには、display：hiddenプロパティを持つ「skits」を持つdivが含まれます。
各シーンには、背景写真（s）（.frameBG）を持つdivと、特定の写真の領域全体をカバーするいくつかの固定高さdiv（）が含まれます。 カバーするdivの高さは、常に画像の高さの倍数です。
スクロール中に、＃containerのtopプロパティが変更されます。 下にスクロールすると、＃containerが上がります。
スクロールすると、「スケッチ」を含むdivの表示部分が表示されます。ブロック、残りは
非表示になります。
写真をカバーするdivの存在は、特定のシーンの表示プロパティ値を決定する必要があるためです。 しかし、このメカニズムがどのように機能するか、最後まで私はまだ理解していません。
いずれにせよ、この手法は私にとって非常に好奇心が強いようでした。時間があれば、トピックに関するバリエーションを思いつくことができます。