Tworzenie efektu rozmycia za pomocą css i jQuery podczas przewijania

Question

Próbuję utworzyć efekt rozmycia, gdy użytkownik przewija w górę iw dół okna przeglądarki, używając css i jquery. Oto mój kod.

HTML

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

CSS

.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

Co staram się zrobić, to zwiększanie i zmniejszanie wartości alfa tła reguły css: rgba() z jquery, gdy użytkownik przewija w górę iw dół, więc będzie się zacierać przy przewijaniu. Czy jest inny sposób na zrobienie tego? Pomóż mi to osiągnąć.

Answer 1

przewija się bluring obrazu

Demo

https://jsfiddle.net/vduucu87/

Kod

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

Answer 2

Dla "rozmycia" efektu, spróbuj wykorzystując cssfilterblur(Npx), gdzie N jest liczbą; pxcss jednostki pikselowe np .; 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/