How do I achieve Yahoo Weather ScrollView Effect?

Question

I'm really interested in creating a UIScrollView similar to the Yahoo Weather app. Here's an example on video:

http://www.youtube.com/watch?v=a-q_yetkpik

I have found this Git which will alow me to do the fade background thing:

https://github.com/justinmfischer/core-background

But how would I achieve the blur effect at the top so that as content scrolls up, it almost fades out behind the UINavigationBar

Any help would be appreciated!!

Answer 1

I wrote the code for the UI effects in the Yahoo! Weather app, would be happy to answer your question.

Sounds like you've figured out how to do the blur (fade between a blurred image based on pixel offset, maxing out at a certain amount... for even better effect, you can have multiple steps in the blur - i.e. fade between non-blurred to half-blurred, then half-blurred to full-blurred etc).

For the fading under kind of effect, you can set the mask property on your content view's layer:

https://developer.apple.com/library/mac/documentation/graphicsimaging/reference/CALayer_class/Introduction/Introduction.html#//apple_ref/occ/instp/CALayer/mask

The mask is an image that fades from transparent to opaque.

--Iain.

Answer 2

I am probably a little late for the party but I have an example project that does exactly that. I did try to look through Yahoo! app for the said image mask Iain was talking about. I have yet to be able to use it the way he described. So I created a CALayer on the fly to achieve the effect.

(@Iain, awesome job! big fan)

Here is the GitHub link

Answer 3

I haven't personally tried it but this might be a good start: https://github.com/kronik/DKLiveBlur

DKLiveBlur

Sources of DKLiveBlur and Demo app to show live blur effect similar to yahoo weather iOS app.

Answer 4

I achieved a similar effect using FXBlurView: https://github.com/nicklockwood/FXBlurView

You simply set the blurRadius relative to the amount scrolled: scrollView.contentOffset.y