10

jqueryプラグインがあるかどうか、またはファッションレーベルkrystalrae.comの「コレクション」セクションに表示されるこの種の効果を実現する方法を誰かが知っているかどうか疑問に思いました。

スクリーンキャプチャビデオ

正しい方向へのヒントや微調整は大歓迎です！

ありがとうございました！

4

3 に答える 3

25

CSSでこれを行うことができます。必要なのは、プロパティを持つ異なる背景画像を持つ、ウィンドウと同じ高さのいくつかの div ですbackground-attachment: fixed;。

#one
{
    background: url(http://images.buzzillions.com/images_products/07/02/iron-horse-maverick-elite-mountain-bike-performance-exclusive_13526_100.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment:fixed;
}

#two
{
    background: url(http://img01.static-nextag.com/image/GMC-Denali-Road-Bike/1/000/006/107/006/610700673.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment:fixed;
}

http://jsfiddle.net/Kyle_/mbhLN/

于 2012-09-04T09:11:27.357 に答える
2

ここにあなたのプラグインがあります！

視差効果です。

于 2012-09-04T09:02:50.200 に答える
0

これらのことを調べるには、firefox のfirebugプラグインを使用してページを開くか、chrome の開発者コンソールを使用してページを開き、ページのソースを確認することをお勧めします。

また、何かを試してから、問題を投稿する場合にも役立ちます。

jQuery プラグインを使用して効果を実現することもできます。

  1. http://gsgd.co.uk/sandbox/jquery/easing
  2. http://www.smoothdivscroll.com
于 2012-09-04T09:09:00.403 に答える