I love reading medium.com. Recently, they had redesign ( Medium 1.0 ) featuring some great new effects. One of the effects I like the most is this “blurred header” effect on scroll. I created a small codepen, showing how to achieve similar effect.

View pen View fullscreen

The effect is actually dead simple – we have blurred version of the image over the original and fade it in/out depending on the web page scroll position. The clever part is disabling the hover ( using pointer-events: none; ) during the page scroll – it gives us performance boost. I used Tweenmax delayedCall() method¬†instead of JavaScript’s native¬†setTimeout method just to show a friend how to use this TweenMax features. The technique is a hack, but it gives me higher FPS.