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.
[button url=”http://codepen.io/bassta/pen/iIskw” style=”green” size=”small” type=”cloud” icon=”check” target=”_blank”] View pen [/button]
[button url=”http://codepen.io/bassta/full/iIskw” style=”green” size=”small” type=”cloud” icon=”check” target=”_blank”] View fullscreen [/button]
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.