この画像効果はどのように作成されますか？

StackOverflow https://stackoverflow.com/questions/2419523

  •  19-09-2019
  •  | 
  •  

質問

私は今、いくつかの時間のために、このページを見てきました。アメージング、本当に。しかし、私はどのようにスクロール作品で発生した背景画像効果を伝えることはできません。コードを介して行っているが、彼らは私が見ることができる画像についてjQueryのプラススクロールプラグインの数が、何を使っていることがわかりました。

どのように行うのことを言うのでしょうか？

サイト： http://herohousing.org/UBBT/する

役に立ちましたか？

解決

このトリックは非常に簡単で、単に各パネルが固定されている背景画像を持っているいくつかのCSSを必要とします：

<style type="text/css">
    div {
        height: 100%;
        background-image: url(http://sstatic.net/so/img/logo.png);
        background-attachment: fixed;
        border: thin solid;
    }
    div.a {
        background-repeat: repeat-x;
        background-color: #FDD;
    }
    div.b {
        background-repeat: repeat-y;
        background-color: #DFD;
    }
    div.c {
        background-repeat: no-repeat;
        background-color: #DDF;
    }
</style>

<div class="a">A</div>
<div class="b">B</div>
<div class="c">C</div>

ここで私は、同じ背景画像を使用していますが、異なる背景色とイメージリピートが、それは、3つの異なる要素だということをお見せする必要があります。

<時間>

編集 [OK]を、それは私が書いているものをいくつかの疑問というのを思え。そして、実際には、引用されたサイトは、このためのjQueryを使用しています。あなたはまだサイズ、背景画像をすることはできませんので、しかし、唯一のブラウザのビューポートの幅と高さにイメージを合わせて。 CSS 3は、 background-sizeプロパティを指定しますが、そのサポートはまだあります独自-khtml-（Konquerorの）、-moz-（FirefoxなどのGeckoのベースのブラウザ）、-o-（オペラ）と-webkit-（SafariのようなWebKitのベースのブラウザ）などのベンダー固有の接頭辞を使用します。

あなたはそれを控えることができた場合は、

、あなたは私がお見せしたCSSのテクニックを使用することができます。

他のヒント

これは「：固定背景付き;」を特に良好に作用する作業を行うものであるごとに異なる背景画像と4つのdivですプロパティは、背景のスクロールを停止します。

あなたがFirefox用のFirebugをダウンロードした場合は、

、あなたはのdivのを検査し、CSSがページ振る舞うを作る方法を観察し、自分自身でそれを再現しようとすることができます。

本当に見栄えの良い効果私は認めなければならない： - ）

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top