は不透明

https://jsfiddle.net/James2038/1x9a2gxq/1/は不透明

視差スクロールのdivを設定します。多くの方法試してみました（RGBA、不透明度、IMG - 。すべての使用CSS）を

body, html { 
     height: 100%; 
    } 

    .parallax { 
     background-color: white; 
     background-image: url("https://static.pexels.com/photos/53594/blue-clouds-day-fluffy-53594.jpeg"); 
     height: 100%; 
     /* Create the parallax scrolling effect */ 
     background-attachment: fixed; 
     background-position: center; 
     background-repeat: no-repeat; 
     background-size: cover; 
    } 

    #parallax-curtain{ 
     height: 100%; 
     background: rgb(255, 255, 255); 
     background: rgba(255, 255, 255, .5); /*In rgba, the a has no effect*/ 
    } 


<body> 

<div class="parallax"></div> 

<div id="parallax-curtain"></div> 

<div class="parallax"></div> 

</body>

出典

2017-03-13 James Pike

イムは、あなたが.parallax-curtainのdivが正しい背景に雲に透けていない理由を不思議に思っている修正した場合は？実際には.parallax-curtain divで雲の上をスクロールしていないからです。 divの背景アタッチメントを固定に設定すると、そのdiv内の背景が固定されます。だから、あなたがそうのようなあなたの視差のdiv内に配置する必要があります雲に透けて見える視差カーテンdivのために：

<div class="parallax"> 
    <div class="parallax-curtain"> 
    </div> 
</div>

そうでなければ、基本的には互いに重複することはありません3つの別々のdivをスクロールしています。あなたの例のrgbaをrgba（0,0,0,0.5）に変更すると、これは50％の不透明度を持つ黒です。それはページの白い背景を覆っているだけなので、灰色で表示されるので、白く黒く見えます。それで、何も起こっていないように見える理由は、白い背景を覆う不透明度を持つ白いrgbaを持っているからです。上記のHTMLマークアップで次のようなことを試すことができます。ここで

.parallax { 
    background-color: white; 
    background-image: url("https://static.pexels.com/photos/53594/blue-clouds-day-fluffy-53594.jpeg"); 
    height: 100%; 
    /* Create the parallax scrolling effect */ 
    background-attachment: fixed; 
    background-position: center; 
    background-repeat: no-repeat; 
    background-size: cover; 
    /*following just for demo purposes to add height and top padding*/ 
    height:300vh; 
    padding-top:100vh; 
} 
.parallax-curtain{ 
    height:100vh; 
    background:rgba(255,255,255,0.5); 
}

はフィドルFiddle Demo

です

出典

2017-03-13 06:31:12

をあなたはそれがダウンしてスクロールを検出したときに.parallaxクラスを上書きし、CSSの不透明度を適用する必要があります。以下は、jQueryを使用したサンプルです。

の作業fiddle

スクリプト：

$(function(){ 
     var previousScroll = 0; 
      $(window).scroll(function(event){ 
       var scroll = $(this).scrollTop(); 
       var heading = $('.parallax'); 

       if (scroll > 600){ 
        console.log('scrolling down'); 
        heading.fadeIn("slow", function() { 
         heading.css('opacity', '0.4'); 
        }); 
       } else { 
        heading.fadeIn("slow", function() { 
         heading.css('opacity', '1'); 
        }); 
       } 
       previousScroll = scroll; 
     }); 
})

出典

2017-03-13 06:11:23 claudios

答えて

関連する問題