6

私のウェブサイトには、完璧なフルページの背景画像があります。css tricksからコードを取得しました。

私のサイトにアクセスすると、実際の動作を確認できます。<site no longer available>

私が知りたいのは、一定の長さをスクロールすると、この画像を別の画像に変更する方法はありますか?

私の目的は同じ画像を作ることですが、犬の口から吹き出しが出てくるので、2 つの画像でこれができると思います。

これは CSS だけで可能ですか?

ここに私が現在使用しているコードがあります。

html { 
background: url(http://robt.info/wp-content/uploads/2013/06/funny-kids-comic-animals.jpg) no-repeat center center fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
4

1 に答える 1

12

他の人がすでに言ったように、いいえ、あなただけではできませんCSSが、少しでもjs codeあなたのためにそれを行うことができます.

元。

jQuery(window).scroll(function(){
    var fromTopPx = 200; // distance to trigger
    var scrolledFromtop = jQuery(window).scrollTop();
    if(scrolledFromtop > fromTopPx){
        jQuery('html').addClass('scrolled');
    }else{
        jQuery('html').removeClass('scrolled');
    }
});

そしてあなたのCSSファイルで：

html {
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

html {
    background-image:url(http://robt.info/wp-content/uploads/2013/06/funny-kids-comic-animals.jpg);
}

html.scrolled {
    background-image:url(http://robt.info/wp-content/uploads/2013/06/funny-kids-comic-animals_2.jpg);
}

したがって、基本的には、 （この場合はjQuery）をHTML tag使用して、上から少し離れた場所にクラスを追加または削除し、そのイメージを変更します。javascriptCSS

次に、いくつかのトランジションを画像に適用したり、コードを操作して、クラスを変更する代わりに、たとえば、slideToggle を作成したりできます....および他の多くのオプション。

幸運を

編集: フィドルの例: http://jsfiddle.net/pZrCM/

于 2013-07-11T08:35:13.560 に答える