HTML + CSS + JSアニメーション-日産ノートのプロモーションサイト

あなたはすでに日産ノートのプロモサイトを見たことがあるかもしれませんが、私の意見では、ウェブデザイナーがそれに注意を払うことは価値があります。



非常にシンプルですが、エレガントで独創的なトリック:写真を含む大きなシートは、ページをすばやくスクロールするとアニメーションプレゼンテーションに変わります。



モバイルインターネットでリンクを開かないでください! ページサイズは20 MB以上です。

プロモーションウェブサイトNissan Note



効果は素晴らしいです-特に日本のネットワークの品質で、訪問者は間違いなくサイトを好きになるでしょう。



いくつかの技術統計


Google Chromeからの情報によると:





動作原理


100%の高さと絶対配置のdiv(#container)があり、固定幅のdiv(#frames)が埋め込まれています。 次に、#framesには、display:hiddenプロパティを持つ「skits」を持つdivが含まれます。



各シーンには、背景写真(s)(.frameBG)を持つdivと、特定の写真の領域全体をカバーするいくつかの固定高さdiv()が含まれます。 カバーするdivの高さは、常に画像の高さの倍数です。

スクロール中に、#containerのtopプロパティが変更されます。 下にスクロールすると、#containerが上がります。



スクロールすると、「スケッチ」を含むdivの表示部分が表示されます。ブロック、残りは非表示になります。

写真をカバーするdivの存在は、特定のシーンの表示プロパティ値を決定する必要があるためです。 しかし、このメカニズムがどのように機能するか、最後まで私はまだ理解していません。



いずれにせよ、この手法は私にとって非常に好奇心が強いようでした。時間があれば、トピックに関するバリエーションを思いつくことができます。



All Articles