CSS размытие фона на прокрутке

Question

У меня есть фиксированное фоновое изображение и на прокрутке. Я хочу, чтобы изображение размылось. Я знаю, как делать размытие в css, но делать это в определенной позиции прокрутки.

Вот пример: https://medium.com/good-music/f160ba9e6c52

Любые мысли, примеры, советы сниппетов будет полезно.

Благодаря

Answer 1

Я Упомяну, как вы можете получить позицию с прокруткой.

$('#divscroll').bind('mousewheel', function (e) { 
    var toTop = $(window).scrollTop(); 
    //from this you can get the distance from the top 
    //then you can blur the image as you want with relevent to the position of ur image 
}); 

Для IE, Opera предыдущая привязка не будет работать, так что вам нужна

$('#divscroll').bind('DOMMouseScroll', function (e) { 
     var toTop = $(window).scrollTop(); 
     //Handle your logic  
    }); 

Надеется, что это может помочь. Cheers.!

Answer 2

Этот код делает именно то, что вы хотите. При поддержке браузера в виде, он использует 2 изображения, хотя вместо размытия:

http://codepen.io/sota0805/pen/pqLcv

Answer 3

Вы можете размыть элемент относительно, как далеко вы прокручиваетесь.

$(window).scroll(function(e) { 

    var distanceScrolled = $(this).scrollTop(); 

    $('.element').css('-webkit-filter', 'blur('+distanceScrolled/60+'px)'); 

}); 

Здесь я использую scrollTop(), чтобы получить количество пикселей окно имеет прокручивается, а затем я поставил пятно на элемент к этому числу, деленное на 60, что просто произвольное число, которое я выбрал, чтобы получить я хотел.

Если вы хотите добавить размытие в определенный момент, вы можете использовать элемент на DOM и проверить его положение относительно окна.

$(window).scroll(function(e) { 

    var elOffset = $('.element').scrollTop() - $(window).scrollTop(); 

    if(elOffset < 450) { 
     $(this).addClass('blur'); 
    } 

}); 

Если .element меньше, чем 450px от верхней части окна, класс blur будет добавлен к нему. Ваш класс размытия будет выглядеть примерно так:

.blur { 
    -webkit-filter: blur(4px); 
} 

Возможно, вы захотите использовать переход с ним. Не забывайте о префиксах поставщика.

Answer 4

На вашем сайте пример (https://medium.com/good-music/f160ba9e6c52) есть no css "blur" effect.

Вы можете найти один нормальный образ: https://d262ilb51hltx0.cloudfront.net/max/1440/1 * THFG10B56f4TQOebO1Zd_w.jpeg

И размытое изображение: https://d262ilb51hltx0.cloudfront.net/max/1440/gradv/29/81/40/darken/45/blur/20/1 * THFG10B56f4TQOebO1Zd_w.jpeg

После наложения этих двух изображений, вы должны изменить непрозрачность первого , готово!