非常にシンプルですが、エレガントで独創的なトリック:写真を含む大きなシートは、ページをすばやくスクロールするとアニメーションプレゼンテーションに変わります。
モバイルインターネットでリンクを開かないでください! ページサイズは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の存在は、特定のシーンの表示プロパティ値を決定する必要があるためです。 しかし、このメカニズムがどのように機能するか、最後まで私はまだ理解していません。
いずれにせよ、この手法は私にとって非常に好奇心が強いようでした。時間があれば、トピックに関するバリエーションを思いつくことができます。