स्क्रॉल

Question

पर सीएसएस और jQuery के साथ धुंध प्रभाव बनाना, जब मैं सीएसएस और jquery का उपयोग कर ब्राउज़र विंडो को ऊपर और नीचे स्क्रॉल करता हूं तो धुंध प्रभाव बनाने की कोशिश कर रहा हूं। मेरा कोड यहाँ है।

एचटीएमएल

<div class="out"> 
    <div class="inner"></div> 
</div> 
<div class="this-div-kills-browsers"> 
</div> 

सीएसएस

.out { 
    width: 100%; 
    height: 800px; 
    background: url(https://placekitten.com/1200/800) no-repeat; 
} 
.this-div-kills-browsers { 
    height: 1000px; 
} 

jQuery

var hideThatKitty = $('.out').innerHeight(); 

$(window).on('scroll', function() { 
    hideThatKitty = hideThatKitty/$('.this-div-kills-browsers').offset().top  
    $('.inner').css('background', rgba(255, 255, 255, \''0'+hideThatKitty\')); 
}); 

demo fiddle

मैं जो करने की कोशिश कर रहा हूं वह सीएसएस नियम पृष्ठभूमि के अल्फा मूल्य को बढ़ा रहा है और घट रहा है: rgba() जब उपयोगकर्ता ऊपर और नीचे स्क्रॉल करते हैं तो jquery के साथ, तो यह स्क्रॉलिंग के साथ धुंधला हो जाएगा। या ऐसा करने का दूसरा तरीका है? कृपया इसे प्राप्त करने में मेरी सहायता करें।

Answer 1

स्क्रॉल जबकि एक छवि bluring

डेमो

https://jsfiddle.net/vduucu87/

कोड

$(window).on('scroll', function() { 
    var pixs = $(document).scrollTop() 
    pixs = pixs/100; 
    $(".out").css({"-webkit-filter": "blur("+pixs+"px)","filter": "blur("+pixs+"px)" })  
}); 

Answer 2

"कलंक" प्रभाव के लिए, cssfilterblur(Npx), जहां N एक नंबर है के उपयोग की कोशिश; pxcss पिक्सेल इकाइयां उदा .; 4px

var hideThatKitty = $('.out').innerHeight(); 
 

 
$(window).on('scroll', function() { 
 
    hideThatKitty = hideThatKitty/$('.this-div-kills-browsers').offset().top 
 
    $('.out') 
 
    .css({"webkit-filter": "blur(4px)", 
 
      "moz-filter":"blur(4px)", 
 
     "ms-filter":"blur(4px)", 
 
     "o-filter":"blur(4px)", 
 
     "filter":"blur(4px)"}); 
 
});

.out { 
 
    width: 100%; 
 
    height: 800px; 
 
    background: url(https://placekitten.com/1200/800) no-repeat; 
 
} 
 
.this-div-kills-browsers { 
 
    height: 1000px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> 
 
</script> 
 
<div class="out"> 
 
    <div class="inner"></div> 
 
</div> 
 
<div class="this-div-kills-browsers"></div>

jsfiddle https://jsfiddle.net/2dmxLnuy/5/