ios swift - blur background image behind scrollview

Question

I'm trying to achieve an effect similar to the one shown in the gif below.

I put an image in the background and a scroll view over it.

However, it confuses me as to how to blur the background image when i begin scrolling.

please advise.

Try to change the background colour of the scrollview with black colour and alpha component in scrollViewDidScroll method — Tyson Vignesh, May 07 '16 at 12:30
Have you tried `visual Effect view with blur` in Storyboard? — ilovecomputer, May 07 '16 at 12:40

score 0 · Answer 1 · edited May 23 '17 at 11:58

You can do something like this, add a blur subview to imageView when scroll begin:

func scrollViewDidScroll(scrollView: UIScrollView) {
    var visualEffectView = UIVisualEffectView(effect: UIBlurEffect(style: .Light))

    visualEffectView.frame = yourIimageView.bounds

    yourImageView.addSubview(visualEffectView)

}

You may also want to track the direction of scroll, so when you scroll up, the blur show up, when scroll down, the blur disappear. You can have a look at this post to see how to detect it.

ios UICollectionView detect scroll direction

ios swift - blur background image behind scrollview

1 Answers1