Skip to content

Instantly share code, notes, and snippets.

Created November 20, 2014 14:28
Show Gist options
  • Save anonymous/d068f61218e7a42a0362 to your computer and use it in GitHub Desktop.
Save anonymous/d068f61218e7a42a0362 to your computer and use it in GitHub Desktop.
LEEeXJ
<img src="http://cloudcannon.com/img/blog/deconstructions/crisp-golden-gate.jpg" />
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);
img {
margin: 1000px 0;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment