divをビューにスクロールするときの固定背景画像の変更（フェードイン/アウト）

各セクション（div）をスクロールするときに固定背景画像を変更したい。divをビューにスクロールするときの固定背景画像の変更（フェードイン/アウト）

ユーザーがスクロールすると背景イメージがフェードアウトし、逆も同様です。画像はZ-インデックスを介して別の画像の上に横たわっているので、セクションに達すると上に重なる画像が消えるだけです。

私は現在、これは最初の画像でのみ機能していますが、残りのトリガー方法はわかりません。

javascriptの使用に満足しています。これまで私がこれまで持っていたことは、素晴らしいことです。

$(window).scroll(function() { 
 
    $("#bg").css("opacity", 1 - $(window).scrollTop()/$("#bg").height()); 
 
});

.divOne { 
 
    height: 2000px; 
 
} 
 

 
.divTwo { 
 
    height: 2000px; 
 
} 
 

 
.divThree { 
 
    height: 2000px; 
 
} 
 

 
.divFour { 
 
    height: 2000px; 
 
} 
 

 
.backgrounds { 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100vh; 
 
    background-position: center; 
 
    background-size: cover; 
 
    background-repeat: no-repeat; 
 
} 
 

 
.bg1 { 
 
    background-image: url("http://techespresso.ca/assets/images/bg/whiteHouseStreet.gif"); 
 
    z-index: 4; 
 
} 
 

 
.bg2 { 
 
    background-image: url("http://techespresso.ca/assets/images/bg/techespresso.jpg"); 
 
    z-index: 3; 
 
} 
 

 
.bg3 { 
 
    background-image: url("http://techespresso.ca/assets/images/bg/techespresso_1.jpg"); 
 
    z-index: 2; 
 
} 
 

 
.bg4 { 
 
    background-image: url("http://techespresso.ca/assets/images/bg/techespresso_2.jpg"); 
 
    z-index: 1; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<HTML> 
 

 
<head> 
 
    <title>Fade Fixed Images</title> 
 
</head> 
 

 
<body> 
 
    <div class="divOne">Div-One</div> 
 
    <div class="divTwo">Div-Two</div> 
 
    <div class="divThree">Div-Three</div> 
 
    <div class="divFour">Div-Four</div> 
 

 
    <div class="backgrounds bg" id="bg"></div> 
 
    <div class="backgrounds bg2" id="bg2"></div> 
 
    <div class="backgrounds bg3" id="bg3"></div> 
 
    <div class="backgrounds bg4" id="bg4"></div> 
 
</body> 
 

 
</HTML>

出典

2017-10-01 Beejster

完全なコードを投稿できますか？ –

私はより良いオリエンテーションのためのコードを追加しました – Beejster

あなたがフェードインをトリガーするか、フェードアウトをするScrollイベントをしたい場合は、（クローム用）、「マウスホイール」イベントのイベントリスナーを追加する必要がありますし、 firefoxの "DOMMouseScroll"。その後、e.wheelDeltaからホイール方向、このような何かを取得：

var delta = evt.detail ? evt.detail : evt.wheelDelta;

は、変数を作成し、私は、その後、デルタ値を「I」の値を増減、と言うと、「I」の値を使用例えばのために、div要素の不透明度を変更するには：

if (i >= 0 && i<= 3) { 
    document.querySelector('.bg1').style.opacity = 1; 
    document.querySelector('.bg2').style.opacity = 0; 
    document.querySelector('.bg3').style.opacity = 0; 
    }

を使用すると、不透明度が徐々に変更したい場合は、そのような何か：

document.querySelector('.bg1').style.opacity = (0.3-(0.1*i))* 
    (1/(0.1*3)); 
    document.querySelector('.bg2').style.opacity = (0.1*i)*(1/(0.1*3));; 
    document.querySelector('.bg3').style.opacity = 0;

は、あなたのアイデアを得る願っています。

編集1：要件に基づいて完全に動作しているかどうかはテストしていません。 htmlページの下にあるscriptタグのbodyタグを閉じる直前に次のコードを挿入します。

var i=0; 

var myFunc = function(e){ 
var evt = window.event || e ; 
var delta = evt.detail ? evt.detail * (-1) : evt.wheelDelta; 

if (delta < 0) 
     i=i+(0.2); //apply your own increment value based on i 
     if ((delta > 0 && i > 0) 
     i=i-(0.2); //apply your own decrement value based on i 

document.querySelector('.bg1').style.opacity = i; 

document.querySelector('.bg2').style.opacity = 1-i;//apply your own formula 
document.querySelector('.bg3').style.opacity = 0; 
} 

document.addEventListener("mousewheel",myFunc,false);

出典

2017-10-01 18:12:21 vikrant

あなたは上記の私のコードに従って実際の例を提供できますか？ – Beejster

私は答えを編集しました。これが役立つかどうかを確認してください。これは純粋なjavascriptに基づいていますが、jquery – vikrant

も元の質問ではなく、スクリプトがbodyタグの外側にあります。、ただ一度それをチェックする – vikrant

divをビューにスクロールするときの固定背景画像の変更（フェードイン/アウト）

答えて

関連する問題