blurImages = function () { $('img').each(function () { var offset = $(this).offset(); offset.top += $(this).outerHeight() / 2; var centerOfTheScreen = window.scrollY + $(window).height() / 2; var distanceFromCenter = Math.abs(centerOfTheScreen - offset.top); var blurFraction = (Math.min(distanceFromCenter, 300) / 300); $(this).css('-webkit-filter', 'blur(' +(10 * blurFraction)+ 'px)') }); }; $(window).on('scroll', blurImages); $(document).ready(blurImages);