HTMLまたはJavaScriptを使用して背景を移動する

私は、以下のウェブサイトに示す背景と同様の効果を作り出そうとしています。可能であればHTMLを好むだろうが、そうでなければJavaScriptはうまくいくはずだ。ありがとう！HTMLまたはJavaScriptを使用して背景を移動する

Example

出典

2011-12-23 Kristian Matthews

このページでは、スクロール中に 'body'の' background-position'プロパティを変更するためにいくつかのjを使用しているようです。 – ArVan

何を試しましたか？何が問題になっていますか？これはちょうど来てコードを要求するサイトではありません。 –

私は様々なHTML/CSSのプロパティを試しましたが、どのように私が望んでいたかはうまくいきませんでした。私はまだJavaScriptを握っているわけではないので、どこから始めるべきかも分かりませんでした。 –

EDIT＃2

フィドル：http://jsfiddle.net/nkyt7/3/

EDIT

フィドル：http://jsfiddle.net/DsRcN/2/

は、コンテナDIVまたはoverflow: autoで何か内部のWebサイトのコンテンツを持っています。あなたの身体要素の背景イメージを与えます。コンテナのオンスクロールで、必要に応じてボディの背景イメージを再配置します。

CSS：

body { 
    background-image: url(bg.png); 
    background-position: 0px 0px; 
    background-repeat: no-repeat; 
} 

.container { /* your site's content should be inside this container */ 
    overflow: auto; 
}

JS：

$('.container').scroll(function() { 
    $('body').css('background-position', ($(this).scrollTop() * 0.9)+'px'); 
});

あなたが望むどのくらいの深さの効果に応じて調整する0.9を微ことができます。

出典

2011-12-23 12:52:50 techfoobar

ありがとうございます。これは完全に動作するはずです。私は私のサーバー上にいるときにこれを試してみます。 –

私の更新された答えのフィドルを確認してください。 – techfoobar

サイト全体が個別のdivに入る必要がありますか？ –

HTMLまたはJavaScriptを使用して背景を移動する

答えて

関連する問題