Parallax scrolling effect on UITableView header view when a tableView is scrolled

Related tags

Header ParallaxTableViewHeader
Overview

ParallaxTableViewHeader

Parallax scrolling effect on UITableView header view when a tableView is scrolled

solarized vim solarized vim solarized vim

Usage

Create a ParallaxHeaderView using either of one API's

  • (id)parallaxHeaderViewWithImage:(UIImage *)image forSize:(CGSize)headerSize
  • (id)parallaxHeaderViewWithCGSize:(CGSize)headerSize

set the parallaxHeaderView to UITableViewHeader as shown below solarized vim

override scrollViewDelegate method

  • (void)scrollViewDidScroll:(UIScrollView *)scrollView

Pass the UITableView or UIScrollView scrolling contentOffset to ParallaxHeaderView as shown below. solarized vim

"thats it"

Swift

let headerView: ParallaxHeaderView = ParallaxHeaderView.parallaxHeaderViewWithImage(UIImage(named: "YourImageName"), forSize: CGSizeMake(self.tableview.frame.size.height, 300)) as ParallaxHeaderView
self.tableview.tableHeaderView = headerView

func  scrollViewDidScroll(scrollView: UIScrollView) {
    let header: ParallaxHeaderView = self.tableview.tableHeaderView as ParallaxHeaderView
    header.layoutHeaderViewForScrollViewOffset(scrollView.contentOffset)

    self.tableview.tableHeaderView = header
}

Credits

Used UIImage+ImageEffects (Extentions) of Created by Aaron Pang, achiving Bluring effect to headerView, support from iOS 7.0 onwords

Comments
  • there is a bug with parallaxHeaderViewWithSubView:

    there is a bug with parallaxHeaderViewWithSubView:

    hi, thanks for your code i attempt to use this method to creat a headerView. my subView has a button for login. when i clicked login button to push to loginViewController and back to root, the bluredImageView is malposition.

    finally，i fix this bug by following code：

    • (void)refreshBlurViewForNewImage { UIImage *screenShot; if (self.subView) { screenShot = [self getImageFromView:self.subView]; }else{ screenShot = [self getImageFromView:self]; } screenShot = [screenShot applyBlurWithRadius:5 tintColor:[UIColor colorWithWhite:0.6 alpha:0.2] saturationDeltaFactor:1.0 maskImage:nil]; self.bluredImageView.image = screenShot; self.bluredImageView.alpha = 0.0f; }

    and , i find the screenShot method in the code always flicker when it is called, so i instead of method : -(UIImage *)getImageFromView:(UIView *)orgView{ UIGraphicsBeginImageContext(orgView.bounds.size); [orgView.layer renderInContext:UIGraphicsGetCurrentContext()]; UIImage *image = UIGraphicsGetImageFromCurrentImageContext(); UIGraphicsEndImageContext(); return image; } Forgive my rude，may it's my own mistack, thancks a lot.

    opened by heyehao2008 2
  • Typo in Swift sample code

    Typo in Swift sample code

    The swift sample code does not setup the view properly. It should be using the width not the height of the tableview. let headerView: ParallaxHeaderView = ParallaxHeaderView.parallaxHeaderViewWithImage(UIImage(named: "YourImageName"), forSize: CGSizeMake(self.tableview.frame.size.width, 300)) as ParallaxHeaderView

    opened by tommyle 0
  • Swift Port

    Swift Port

    Hey Vinodh, i have ported your code to Swift for using inside my new app and thought you may would be interested to add it to your repo. The example app is not as nice as yours, because i reduced the styling of the table view cells, but i think that's not the focus.

    Greetings from cold Berlin, Christopher

    opened by Stitch7 1
  • Take time to load the view

    Take time to load the view

    Hi, nice plugin. I have one issue. I have navigation controller. My root view controller is FirstView and SecondView contains tableview with parallaxTableViewHeader. Now when i push from FirstView to SecondView it will take time to push to SecondView. (parallaxtableviewheader setup takes time to load the second view) Can anyone give the suggestion to resolve this issue.

    Thanks.

    opened by pinkal 1
  • How to add Gesture Recognizer to headerView?

    How to add Gesture Recognizer to headerView?

    I tried adding gestureRecognizer directly to headerView but not working, so I also tried:

    ` let headerImageView = UIImageView(frame: CGRectMake(0, 0, UIScreen.mainScreen().bounds.width, UIScreen.mainScreen().bounds.width*0.667))

        headerImageView.image = headerImage

    headerImageView.userInteractionEnabled = true

    let tap = UIGestureRecognizer(target: self, action: "showOrgIntroView")

    headerImageView.addGestureRecognizer(tap)

    let headerView = ParallaxHeaderView.parallaxHeaderViewWithSubView(headerImageView) as! ParallaxHeaderView

    self.tableView.tableHeaderView = headerView`

    But it still doesn't work either.

    opened by Tinyik 1
Owner
Vinodh Swamy
Vinodh Swamy
GitHub
A generic stretchy header for UITableView and UICollectionView

GSKStretchyHeaderView, by gskbyte GSKStretchyHeaderView is an implementation of the stretchy header paradigm as seen on many apps, like Twitter, Spoti

Jose Alcalá Correa 1.7k Dec 30, 2022
UICollectionView replacement of UITableView. Do even more like Parallax Header, Sticky Section Header. Made for iOS 7.

CSStickyHeaderFlowLayout Contributors For anyone who'd like to be a contributor to the repository, please read the Contribution Guideline Parallax, St

null 5.1k Jan 6, 2023
Simple way to add parallax header to UIScrollView/UITableView written in Swift.

ParallaxHeader Simple way to add parallax header to UIScrollView or it's subclasses. One image view Slider with images Blur vibrant text Blur round ic

Roman Sorochak 998 Dec 11, 2022
Transition from any SwiftUI Text view into an inline navigation bar title when the view is scrolled off-screen, as seen in Apple's TV & TestFlight iOS apps.

SwiftUI Matched Inline Title Transition from any SwiftUI Text view into an inline navigation bar title when the view is scrolled off-screen, as seen i

Seb Jachec 19 Oct 9, 2022
Simple parallax header for UIScrollView

MXParallaxHeader ⚠️ This project is no longer maintained, see #124 ⚠️ MXParallaxHeader is a simple header class for UIScrollView. In addition, MXScrol

Maxime Epain 1.7k Dec 9, 2022
HPParallaxHeader is a simple parallax header class for UIScrollView.

HPParallaxHeader is a simple parallax header class for UIScrollView.

null 40 Dec 15, 2022
ScrollView that supports a parallax header image and static overlay.

ScrollViewReactiveHeader A replacement ScrollView that provides a header with subtle scroll animations. example-video.mov Using ScrollViewReactiveHead

null 49 Dec 29, 2022
A SwiftUI ScrollView Designed to imitate the App Store and Apple Music ScrollViews (with or without a Parallax Header)

FancyScrollView I spent a lot of time looking for a way to recreate the UI of the ScrollViews in Stock Apple Apps (i.e. App Store and Apple Music) ins

Mathias Quintero 696 Dec 30, 2022
A SwiftUI ScrollView that runs a callback when subviews are scrolled in and out of view.

VisibilityTrackingScrollView This package provides a variant of ScrollView that you can use to track whether views inside it are actually visible. Usa

Elegant Chaos 3 Oct 10, 2022
GrouponHeader - iOS TableView Header Animation, Swift/UIKit

GrouponHeader Description: iOS TableView Header Animation Technology: Swift, UIK

James Sedlacek 8 Dec 15, 2022
API-TableView-Swift - API call with URLSession and show data to TableView with swift

API-TableView-Swift API call with URLSession and show data to TableView with swi

Aman Ullah Akhand 1 Sep 3, 2022
Apple TV Parallax effect in Swift.

MPParallaxView Apple TV Parallax effect in Swift. Rotate view using touch or accelerometer. Usage To run the example project, clone the repo, and run

Droids On Roids 1.7k Jan 4, 2023
tvOS controls and extensions that add parallax effect to your application.

ParallaxView Summary Easy to use UIView, UICollectionViewCell with parallax effect and extensions to add this effect to any UIView. Rotate view using

PGS Software 466 Nov 13, 2022
iOS 7/8 style side menu with parallax effect.

RESideMenu iOS 7/8 style side menu with parallax effect inspired by Dribbble shots (first and second). Since version 4.0 you can add menu view control

Roman Efimov 7.2k Dec 28, 2022
Beautiful iOS side menu library with parallax effect. Written in Swift

AKSideMenu AKSideMenu is a double side menu library with parallax effect. Example Project See the contained examples to get a sample of how AKSideMenu

Diogo Autilio 280 Dec 6, 2022
A lightweight 3D Linear Carousel with parallax effect

TGLParallaxCarousel A lightweight 3D Linear Carousel with parallax effect [GIF] Threedimensional & Normal mode Installation TGLParallaxCarousel is ava

Matteo Tagliafico 440 Dec 17, 2022
✨ Super easy Parallax and Haptic Effect.

IParallaxAndHapticEffect ✨ Super easy Parallax and Haptic Effect. This library helps you easily use the 'Parallax' and 'Haptic' effects. Customized 3D

Hae Chan 2 Feb 9, 2022
A tiny category on UIView that allows you to set one property: "parallaxIntensity" to achieve a parallax effect with UIMotionEffect

NGAParallaxMotion A tiny category on UIView that allows you to set one property: parallaxIntensity to achieve a parallax effect with UIMotionEffect. S

Michael Bishop 650 Sep 26, 2022
A generic stretchy header for UITableView and UICollectionView

GSKStretchyHeaderView, by gskbyte GSKStretchyHeaderView is an implementation of the stretchy header paradigm as seen on many apps, like Twitter, Spoti

Jose Alcalá Correa 1.7k Dec 30, 2022
A small project written with SwiftUI achieves a scrolling effect similar to Apple Music lyrics.

Music Lyrics scrolling animation effect Since the iOS/iPadOS 13 update, Apple has brought a new scrolling lyrics feature to Apple Music. The album im

Huang Runhua 18 Nov 9, 2022