parallactic collection views
DESCRIPTION
360iDev session on adding parallax effect to UICollectionView layouts.TRANSCRIPT
![Page 1: Parallactic Collection Views](https://reader033.vdocument.in/reader033/viewer/2022052822/554bc515b4c90530298b545e/html5/thumbnails/1.jpg)
![Page 2: Parallactic Collection Views](https://reader033.vdocument.in/reader033/viewer/2022052822/554bc515b4c90530298b545e/html5/thumbnails/2.jpg)
Parallactic Collection Views
How to add depth into iOS user interfaces
![Page 3: Parallactic Collection Views](https://reader033.vdocument.in/reader033/viewer/2022052822/554bc515b4c90530298b545e/html5/thumbnails/3.jpg)
![Page 4: Parallactic Collection Views](https://reader033.vdocument.in/reader033/viewer/2022052822/554bc515b4c90530298b545e/html5/thumbnails/4.jpg)
UI Collection View
UICollectionViewDataSource
UICollectionViewCellUICollectionViewCellUICollectionViewCellUICollectionViewCellUICollectionReusableView
UICollectionViewLayout
UICollectionReusableViewUICollectionReusableViewUICollectionReusableView
UICollectionView
UICollectionViewDelegate
![Page 5: Parallactic Collection Views](https://reader033.vdocument.in/reader033/viewer/2022052822/554bc515b4c90530298b545e/html5/thumbnails/5.jpg)
Truly Great Apps
![Page 6: Parallactic Collection Views](https://reader033.vdocument.in/reader033/viewer/2022052822/554bc515b4c90530298b545e/html5/thumbnails/6.jpg)
What makes an app
truly great?
![Page 7: Parallactic Collection Views](https://reader033.vdocument.in/reader033/viewer/2022052822/554bc515b4c90530298b545e/html5/thumbnails/7.jpg)
Fit in
![Page 8: Parallactic Collection Views](https://reader033.vdocument.in/reader033/viewer/2022052822/554bc515b4c90530298b545e/html5/thumbnails/8.jpg)
Magical
![Page 9: Parallactic Collection Views](https://reader033.vdocument.in/reader033/viewer/2022052822/554bc515b4c90530298b545e/html5/thumbnails/9.jpg)
AmazingFirst Impressions
![Page 10: Parallactic Collection Views](https://reader033.vdocument.in/reader033/viewer/2022052822/554bc515b4c90530298b545e/html5/thumbnails/10.jpg)
Experience Matters
![Page 11: Parallactic Collection Views](https://reader033.vdocument.in/reader033/viewer/2022052822/554bc515b4c90530298b545e/html5/thumbnails/11.jpg)
Let’s go back in time
![Page 12: Parallactic Collection Views](https://reader033.vdocument.in/reader033/viewer/2022052822/554bc515b4c90530298b545e/html5/thumbnails/12.jpg)
![Page 13: Parallactic Collection Views](https://reader033.vdocument.in/reader033/viewer/2022052822/554bc515b4c90530298b545e/html5/thumbnails/13.jpg)
![Page 14: Parallactic Collection Views](https://reader033.vdocument.in/reader033/viewer/2022052822/554bc515b4c90530298b545e/html5/thumbnails/14.jpg)
AP
![Page 15: Parallactic Collection Views](https://reader033.vdocument.in/reader033/viewer/2022052822/554bc515b4c90530298b545e/html5/thumbnails/15.jpg)
Horizontal Navigation
![Page 16: Parallactic Collection Views](https://reader033.vdocument.in/reader033/viewer/2022052822/554bc515b4c90530298b545e/html5/thumbnails/16.jpg)
And now...
![Page 17: Parallactic Collection Views](https://reader033.vdocument.in/reader033/viewer/2022052822/554bc515b4c90530298b545e/html5/thumbnails/17.jpg)
iOS 7 is Coming
![Page 18: Parallactic Collection Views](https://reader033.vdocument.in/reader033/viewer/2022052822/554bc515b4c90530298b545e/html5/thumbnails/18.jpg)
![Page 19: Parallactic Collection Views](https://reader033.vdocument.in/reader033/viewer/2022052822/554bc515b4c90530298b545e/html5/thumbnails/19.jpg)
Opportunity
![Page 20: Parallactic Collection Views](https://reader033.vdocument.in/reader033/viewer/2022052822/554bc515b4c90530298b545e/html5/thumbnails/20.jpg)
Design for iOS 7
![Page 21: Parallactic Collection Views](https://reader033.vdocument.in/reader033/viewer/2022052822/554bc515b4c90530298b545e/html5/thumbnails/21.jpg)
Depth
![Page 22: Parallactic Collection Views](https://reader033.vdocument.in/reader033/viewer/2022052822/554bc515b4c90530298b545e/html5/thumbnails/22.jpg)
Navigation
![Page 23: Parallactic Collection Views](https://reader033.vdocument.in/reader033/viewer/2022052822/554bc515b4c90530298b545e/html5/thumbnails/23.jpg)
Tools
We Need
![Page 24: Parallactic Collection Views](https://reader033.vdocument.in/reader033/viewer/2022052822/554bc515b4c90530298b545e/html5/thumbnails/24.jpg)
UICollectionView
![Page 25: Parallactic Collection Views](https://reader033.vdocument.in/reader033/viewer/2022052822/554bc515b4c90530298b545e/html5/thumbnails/25.jpg)
![Page 26: Parallactic Collection Views](https://reader033.vdocument.in/reader033/viewer/2022052822/554bc515b4c90530298b545e/html5/thumbnails/26.jpg)
UICollectionView
iOS 7
![Page 27: Parallactic Collection Views](https://reader033.vdocument.in/reader033/viewer/2022052822/554bc515b4c90530298b545e/html5/thumbnails/27.jpg)
How to add depth?
![Page 28: Parallactic Collection Views](https://reader033.vdocument.in/reader033/viewer/2022052822/554bc515b4c90530298b545e/html5/thumbnails/28.jpg)
parallax
![Page 29: Parallactic Collection Views](https://reader033.vdocument.in/reader033/viewer/2022052822/554bc515b4c90530298b545e/html5/thumbnails/29.jpg)
Examples
![Page 30: Parallactic Collection Views](https://reader033.vdocument.in/reader033/viewer/2022052822/554bc515b4c90530298b545e/html5/thumbnails/30.jpg)
http://tinyurl.com/360Parallax
![Page 31: Parallactic Collection Views](https://reader033.vdocument.in/reader033/viewer/2022052822/554bc515b4c90530298b545e/html5/thumbnails/31.jpg)
Not just cool...
![Page 32: Parallactic Collection Views](https://reader033.vdocument.in/reader033/viewer/2022052822/554bc515b4c90530298b545e/html5/thumbnails/32.jpg)
How Parallax Works
![Page 33: Parallactic Collection Views](https://reader033.vdocument.in/reader033/viewer/2022052822/554bc515b4c90530298b545e/html5/thumbnails/33.jpg)
Relative Motion
![Page 34: Parallactic Collection Views](https://reader033.vdocument.in/reader033/viewer/2022052822/554bc515b4c90530298b545e/html5/thumbnails/34.jpg)
You can do this with UICollection View
![Page 35: Parallactic Collection Views](https://reader033.vdocument.in/reader033/viewer/2022052822/554bc515b4c90530298b545e/html5/thumbnails/35.jpg)
Why Collection View?
![Page 36: Parallactic Collection Views](https://reader033.vdocument.in/reader033/viewer/2022052822/554bc515b4c90530298b545e/html5/thumbnails/36.jpg)
In this session you will:
![Page 37: Parallactic Collection Views](https://reader033.vdocument.in/reader033/viewer/2022052822/554bc515b4c90530298b545e/html5/thumbnails/37.jpg)
Master Adding Parallax to Your Layouts
![Page 38: Parallactic Collection Views](https://reader033.vdocument.in/reader033/viewer/2022052822/554bc515b4c90530298b545e/html5/thumbnails/38.jpg)
Let’s Dive In
![Page 39: Parallactic Collection Views](https://reader033.vdocument.in/reader033/viewer/2022052822/554bc515b4c90530298b545e/html5/thumbnails/39.jpg)
What are we building?
![Page 40: Parallactic Collection Views](https://reader033.vdocument.in/reader033/viewer/2022052822/554bc515b4c90530298b545e/html5/thumbnails/40.jpg)
![Page 41: Parallactic Collection Views](https://reader033.vdocument.in/reader033/viewer/2022052822/554bc515b4c90530298b545e/html5/thumbnails/41.jpg)
The Background
![Page 42: Parallactic Collection Views](https://reader033.vdocument.in/reader033/viewer/2022052822/554bc515b4c90530298b545e/html5/thumbnails/42.jpg)
Background View1
![Page 43: Parallactic Collection Views](https://reader033.vdocument.in/reader033/viewer/2022052822/554bc515b4c90530298b545e/html5/thumbnails/43.jpg)
UI Collection View
UICollectionViewDataSource
UICollectionViewCellUICollectionViewCellUICollectionViewCellUICollectionViewCellUICollectionReusableView
UICollectionViewLayout
UICollectionReusableViewUICollectionReusableViewUICollectionReusableView
UICollectionView
UICollectionViewDelegate
![Page 44: Parallactic Collection Views](https://reader033.vdocument.in/reader033/viewer/2022052822/554bc515b4c90530298b545e/html5/thumbnails/44.jpg)
Calculating Layout Metrics
![Page 45: Parallactic Collection Views](https://reader033.vdocument.in/reader033/viewer/2022052822/554bc515b4c90530298b545e/html5/thumbnails/45.jpg)
Elements in Rect
- (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect {
![Page 46: Parallactic Collection Views](https://reader033.vdocument.in/reader033/viewer/2022052822/554bc515b4c90530298b545e/html5/thumbnails/46.jpg)
Title1
Title2
Title3
Content Content
Content Content
Content
RectElements in Rect
![Page 47: Parallactic Collection Views](https://reader033.vdocument.in/reader033/viewer/2022052822/554bc515b4c90530298b545e/html5/thumbnails/47.jpg)
1
2
3
Calculate
Test
Add
![Page 48: Parallactic Collection Views](https://reader033.vdocument.in/reader033/viewer/2022052822/554bc515b4c90530298b545e/html5/thumbnails/48.jpg)
Layout Attributes
- (UICollectionViewLayoutAttributes *)layoutAttributesForDecorationViewOfKind:(NSString *)decorationViewKind
atIndexPath:(NSIndexPath *)indexPath
![Page 49: Parallactic Collection Views](https://reader033.vdocument.in/reader033/viewer/2022052822/554bc515b4c90530298b545e/html5/thumbnails/49.jpg)
Anchor Background2
![Page 50: Parallactic Collection Views](https://reader033.vdocument.in/reader033/viewer/2022052822/554bc515b4c90530298b545e/html5/thumbnails/50.jpg)
UICollectionView
UIScrollView
UIView
UIResponder
NSObject
Class Hierarchy
![Page 51: Parallactic Collection Views](https://reader033.vdocument.in/reader033/viewer/2022052822/554bc515b4c90530298b545e/html5/thumbnails/51.jpg)
Scroll View Mechanics
![Page 52: Parallactic Collection Views](https://reader033.vdocument.in/reader033/viewer/2022052822/554bc515b4c90530298b545e/html5/thumbnails/52.jpg)
Scroll ViewMechanics
Scroll View Contents
BOUNDS
![Page 53: Parallactic Collection Views](https://reader033.vdocument.in/reader033/viewer/2022052822/554bc515b4c90530298b545e/html5/thumbnails/53.jpg)
Scroll ViewMechanics
Scroll View Contents
BOUNDS
![Page 54: Parallactic Collection Views](https://reader033.vdocument.in/reader033/viewer/2022052822/554bc515b4c90530298b545e/html5/thumbnails/54.jpg)
Anchor
![Page 55: Parallactic Collection Views](https://reader033.vdocument.in/reader033/viewer/2022052822/554bc515b4c90530298b545e/html5/thumbnails/55.jpg)
AnchoringSubviews
Scroll View Contents
Subview
BOUNDS
![Page 56: Parallactic Collection Views](https://reader033.vdocument.in/reader033/viewer/2022052822/554bc515b4c90530298b545e/html5/thumbnails/56.jpg)
AnchoringSubviews
Scroll View Contents
Subview
BOUNDS
![Page 57: Parallactic Collection Views](https://reader033.vdocument.in/reader033/viewer/2022052822/554bc515b4c90530298b545e/html5/thumbnails/57.jpg)
Need New Layout Metrics on Scroll
![Page 58: Parallactic Collection Views](https://reader033.vdocument.in/reader033/viewer/2022052822/554bc515b4c90530298b545e/html5/thumbnails/58.jpg)
Invalidate Layout
- (BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds {
![Page 59: Parallactic Collection Views](https://reader033.vdocument.in/reader033/viewer/2022052822/554bc515b4c90530298b545e/html5/thumbnails/59.jpg)
InvalidateLayout
Scroll View Contents
Subview
BOUNDS
-invalidateLayout-invalidateLayout-invalidateLayout-invalidateLayout-invalidateLayout
![Page 60: Parallactic Collection Views](https://reader033.vdocument.in/reader033/viewer/2022052822/554bc515b4c90530298b545e/html5/thumbnails/60.jpg)
New Metrics On Invalidation
![Page 61: Parallactic Collection Views](https://reader033.vdocument.in/reader033/viewer/2022052822/554bc515b4c90530298b545e/html5/thumbnails/61.jpg)
Layout Attributes
- (UICollectionViewLayoutAttributes *)layoutAttributesForDecorationViewOfKind:(NSString *)decorationViewKind
atIndexPath:(NSIndexPath *)indexPath
![Page 62: Parallactic Collection Views](https://reader033.vdocument.in/reader033/viewer/2022052822/554bc515b4c90530298b545e/html5/thumbnails/62.jpg)
Parallax3
![Page 63: Parallactic Collection Views](https://reader033.vdocument.in/reader033/viewer/2022052822/554bc515b4c90530298b545e/html5/thumbnails/63.jpg)
It’s about to get complicated
![Page 64: Parallactic Collection Views](https://reader033.vdocument.in/reader033/viewer/2022052822/554bc515b4c90530298b545e/html5/thumbnails/64.jpg)
Layout Attributes
- (UICollectionViewLayoutAttributes *)layoutAttributesForDecorationViewOfKind:(NSString *)decorationViewKind
atIndexPath:(NSIndexPath *)indexPath
![Page 65: Parallactic Collection Views](https://reader033.vdocument.in/reader033/viewer/2022052822/554bc515b4c90530298b545e/html5/thumbnails/65.jpg)
Parallactic Offset
![Page 66: Parallactic Collection Views](https://reader033.vdocument.in/reader033/viewer/2022052822/554bc515b4c90530298b545e/html5/thumbnails/66.jpg)
Percentage Based
![Page 67: Parallactic Collection Views](https://reader033.vdocument.in/reader033/viewer/2022052822/554bc515b4c90530298b545e/html5/thumbnails/67.jpg)
Content Offset
Scroll View Contents
BOUNDS
0%
100%
50%
![Page 68: Parallactic Collection Views](https://reader033.vdocument.in/reader033/viewer/2022052822/554bc515b4c90530298b545e/html5/thumbnails/68.jpg)
Content Offset
Scroll View Contents
BOUNDS
0%
100%
50%
![Page 69: Parallactic Collection Views](https://reader033.vdocument.in/reader033/viewer/2022052822/554bc515b4c90530298b545e/html5/thumbnails/69.jpg)
Content Offset
Scroll View Contents
BOUNDS
100%Bounds Height
![Page 70: Parallactic Collection Views](https://reader033.vdocument.in/reader033/viewer/2022052822/554bc515b4c90530298b545e/html5/thumbnails/70.jpg)
Content Offset
Scroll View Contents
BOUNDS
100%
Content Size Height
![Page 71: Parallactic Collection Views](https://reader033.vdocument.in/reader033/viewer/2022052822/554bc515b4c90530298b545e/html5/thumbnails/71.jpg)
Content Offset
Scroll View Contents
BOUNDS
100%
Distance to Travel
![Page 72: Parallactic Collection Views](https://reader033.vdocument.in/reader033/viewer/2022052822/554bc515b4c90530298b545e/html5/thumbnails/72.jpg)
Percentage
CGFloat percentageComplete = self.collectionView.contentOffset.y / (self.collectionView.contentSize.height - self.collectionView.bounds.size.height);
![Page 73: Parallactic Collection Views](https://reader033.vdocument.in/reader033/viewer/2022052822/554bc515b4c90530298b545e/html5/thumbnails/73.jpg)
Calculating Parallactic Offset
![Page 74: Parallactic Collection Views](https://reader033.vdocument.in/reader033/viewer/2022052822/554bc515b4c90530298b545e/html5/thumbnails/74.jpg)
DefineOffset
Parallaxing BackgroundBOUNDS
Offset
0%
![Page 75: Parallactic Collection Views](https://reader033.vdocument.in/reader033/viewer/2022052822/554bc515b4c90530298b545e/html5/thumbnails/75.jpg)
DefineOffset
Parallaxing Background
BOUNDS
Offset
50%
![Page 76: Parallactic Collection Views](https://reader033.vdocument.in/reader033/viewer/2022052822/554bc515b4c90530298b545e/html5/thumbnails/76.jpg)
DefineOffset
Parallaxing Background
BOUNDS
Offset
100%
![Page 77: Parallactic Collection Views](https://reader033.vdocument.in/reader033/viewer/2022052822/554bc515b4c90530298b545e/html5/thumbnails/77.jpg)
Offset
CGFloat parallaxShift = 6.0;
CGFloat offset = ([self scrollPercentageComplete] * (2 * parallaxShift)) - parallaxShift;
![Page 78: Parallactic Collection Views](https://reader033.vdocument.in/reader033/viewer/2022052822/554bc515b4c90530298b545e/html5/thumbnails/78.jpg)
1
2
3
Inspect Collection View Content Offset
Calculate Current Percentage
Calculate Current Parallactic Offset
4 Apply the Parallax Frame
![Page 79: Parallactic Collection Views](https://reader033.vdocument.in/reader033/viewer/2022052822/554bc515b4c90530298b545e/html5/thumbnails/79.jpg)
Build It
![Page 80: Parallactic Collection Views](https://reader033.vdocument.in/reader033/viewer/2022052822/554bc515b4c90530298b545e/html5/thumbnails/80.jpg)
We’veGot
Parallax
![Page 81: Parallactic Collection Views](https://reader033.vdocument.in/reader033/viewer/2022052822/554bc515b4c90530298b545e/html5/thumbnails/81.jpg)
The Cells
![Page 82: Parallactic Collection Views](https://reader033.vdocument.in/reader033/viewer/2022052822/554bc515b4c90530298b545e/html5/thumbnails/82.jpg)
Similar
![Page 83: Parallactic Collection Views](https://reader033.vdocument.in/reader033/viewer/2022052822/554bc515b4c90530298b545e/html5/thumbnails/83.jpg)
Build It
![Page 84: Parallactic Collection Views](https://reader033.vdocument.in/reader033/viewer/2022052822/554bc515b4c90530298b545e/html5/thumbnails/84.jpg)
YOUNow
can Parallax
![Page 85: Parallactic Collection Views](https://reader033.vdocument.in/reader033/viewer/2022052822/554bc515b4c90530298b545e/html5/thumbnails/85.jpg)
One more thing...
![Page 86: Parallactic Collection Views](https://reader033.vdocument.in/reader033/viewer/2022052822/554bc515b4c90530298b545e/html5/thumbnails/86.jpg)
Parallactic rainForest
![Page 87: Parallactic Collection Views](https://reader033.vdocument.in/reader033/viewer/2022052822/554bc515b4c90530298b545e/html5/thumbnails/87.jpg)
Inspiration
![Page 89: Parallactic Collection Views](https://reader033.vdocument.in/reader033/viewer/2022052822/554bc515b4c90530298b545e/html5/thumbnails/89.jpg)
Demo
![Page 90: Parallactic Collection Views](https://reader033.vdocument.in/reader033/viewer/2022052822/554bc515b4c90530298b545e/html5/thumbnails/90.jpg)
ARCHITECTURE
![Page 91: Parallactic Collection Views](https://reader033.vdocument.in/reader033/viewer/2022052822/554bc515b4c90530298b545e/html5/thumbnails/91.jpg)
Parallaxing Cell
Banner
Parallaxing Cell
Banner
Components
![Page 92: Parallactic Collection Views](https://reader033.vdocument.in/reader033/viewer/2022052822/554bc515b4c90530298b545e/html5/thumbnails/92.jpg)
Anchor
![Page 93: Parallactic Collection Views](https://reader033.vdocument.in/reader033/viewer/2022052822/554bc515b4c90530298b545e/html5/thumbnails/93.jpg)
Cell
Scroll View Contents
Cell 2Cell
Banner
Banner
Banner
Banner
![Page 94: Parallactic Collection Views](https://reader033.vdocument.in/reader033/viewer/2022052822/554bc515b4c90530298b545e/html5/thumbnails/94.jpg)
Scroll View Contents
Banner
CellCell 2CellBanner
Banner
Banner
![Page 95: Parallactic Collection Views](https://reader033.vdocument.in/reader033/viewer/2022052822/554bc515b4c90530298b545e/html5/thumbnails/95.jpg)
Scroll View Contents
Banner
CellCell 2Cell
Banner
Banner
Banner
![Page 96: Parallactic Collection Views](https://reader033.vdocument.in/reader033/viewer/2022052822/554bc515b4c90530298b545e/html5/thumbnails/96.jpg)
Scroll View Contents
Banner
CellCell 2Cell
Banner
Banner
Banner
![Page 97: Parallactic Collection Views](https://reader033.vdocument.in/reader033/viewer/2022052822/554bc515b4c90530298b545e/html5/thumbnails/97.jpg)
Scroll View Contents
Banner
CellCell 2Cell
Banner
Banner
Banner
![Page 98: Parallactic Collection Views](https://reader033.vdocument.in/reader033/viewer/2022052822/554bc515b4c90530298b545e/html5/thumbnails/98.jpg)
Crop
![Page 99: Parallactic Collection Views](https://reader033.vdocument.in/reader033/viewer/2022052822/554bc515b4c90530298b545e/html5/thumbnails/99.jpg)
Scroll View Contents
Cell
Banner
Banner
Banner
Banner
![Page 100: Parallactic Collection Views](https://reader033.vdocument.in/reader033/viewer/2022052822/554bc515b4c90530298b545e/html5/thumbnails/100.jpg)
Scroll View Contents
Cell
Banner
Banner
Banner
Banner
![Page 101: Parallactic Collection Views](https://reader033.vdocument.in/reader033/viewer/2022052822/554bc515b4c90530298b545e/html5/thumbnails/101.jpg)
Scroll View Contents
Cell 2Cell
Banner
Banner
Banner
Banner
![Page 102: Parallactic Collection Views](https://reader033.vdocument.in/reader033/viewer/2022052822/554bc515b4c90530298b545e/html5/thumbnails/102.jpg)
Cell 2
Scroll View Contents
Cell
Banner
Banner
Banner
Banner
![Page 103: Parallactic Collection Views](https://reader033.vdocument.in/reader033/viewer/2022052822/554bc515b4c90530298b545e/html5/thumbnails/103.jpg)
Scroll View Contents
Cell 2
Cell
Banner
Banner
Banner
Banner
![Page 104: Parallactic Collection Views](https://reader033.vdocument.in/reader033/viewer/2022052822/554bc515b4c90530298b545e/html5/thumbnails/104.jpg)
Scroll View Contents
Cell 2
Banner
Banner
Banner
Banner
![Page 105: Parallactic Collection Views](https://reader033.vdocument.in/reader033/viewer/2022052822/554bc515b4c90530298b545e/html5/thumbnails/105.jpg)
Scroll View Contents
Cell 3Cell 2
Banner
Banner
Banner
Banner
![Page 106: Parallactic Collection Views](https://reader033.vdocument.in/reader033/viewer/2022052822/554bc515b4c90530298b545e/html5/thumbnails/106.jpg)
Scroll View Contents
Cell 3
Cell 2
Banner
Banner
Banner
Banner
![Page 107: Parallactic Collection Views](https://reader033.vdocument.in/reader033/viewer/2022052822/554bc515b4c90530298b545e/html5/thumbnails/107.jpg)
Scroll View Contents
Cell 3
Cell 2
Banner
Banner
Banner
Banner
![Page 108: Parallactic Collection Views](https://reader033.vdocument.in/reader033/viewer/2022052822/554bc515b4c90530298b545e/html5/thumbnails/108.jpg)
Scroll View Contents
Cell 3
Banner
Banner
Banner
Banner
![Page 109: Parallactic Collection Views](https://reader033.vdocument.in/reader033/viewer/2022052822/554bc515b4c90530298b545e/html5/thumbnails/109.jpg)
Parallax
![Page 110: Parallactic Collection Views](https://reader033.vdocument.in/reader033/viewer/2022052822/554bc515b4c90530298b545e/html5/thumbnails/110.jpg)
DefineOffset
Scroll View Contents
Banner
Banner
Parallaxing Cell
Banner
Banner
BOUNDS
![Page 111: Parallactic Collection Views](https://reader033.vdocument.in/reader033/viewer/2022052822/554bc515b4c90530298b545e/html5/thumbnails/111.jpg)
DefineOffset
Parallaxing Cell
BOUNDS
![Page 112: Parallactic Collection Views](https://reader033.vdocument.in/reader033/viewer/2022052822/554bc515b4c90530298b545e/html5/thumbnails/112.jpg)
DefineOffset
Parallaxing Cell
BOUNDS
Offset
0%
![Page 113: Parallactic Collection Views](https://reader033.vdocument.in/reader033/viewer/2022052822/554bc515b4c90530298b545e/html5/thumbnails/113.jpg)
DefineOffset
Parallaxing Cell
BOUNDS
Offset
50%
![Page 114: Parallactic Collection Views](https://reader033.vdocument.in/reader033/viewer/2022052822/554bc515b4c90530298b545e/html5/thumbnails/114.jpg)
DefineOffset
Parallaxing CellBOUNDS
Offset
100%
![Page 115: Parallactic Collection Views](https://reader033.vdocument.in/reader033/viewer/2022052822/554bc515b4c90530298b545e/html5/thumbnails/115.jpg)
So that’s parallax
![Page 116: Parallactic Collection Views](https://reader033.vdocument.in/reader033/viewer/2022052822/554bc515b4c90530298b545e/html5/thumbnails/116.jpg)
Why do this?
![Page 117: Parallactic Collection Views](https://reader033.vdocument.in/reader033/viewer/2022052822/554bc515b4c90530298b545e/html5/thumbnails/117.jpg)
Fit In
![Page 118: Parallactic Collection Views](https://reader033.vdocument.in/reader033/viewer/2022052822/554bc515b4c90530298b545e/html5/thumbnails/118.jpg)
Get Featured by Apple
![Page 119: Parallactic Collection Views](https://reader033.vdocument.in/reader033/viewer/2022052822/554bc515b4c90530298b545e/html5/thumbnails/119.jpg)
And...
![Page 120: Parallactic Collection Views](https://reader033.vdocument.in/reader033/viewer/2022052822/554bc515b4c90530298b545e/html5/thumbnails/120.jpg)
delight your users
![Page 121: Parallactic Collection Views](https://reader033.vdocument.in/reader033/viewer/2022052822/554bc515b4c90530298b545e/html5/thumbnails/121.jpg)
Resources
![Page 122: Parallactic Collection Views](https://reader033.vdocument.in/reader033/viewer/2022052822/554bc515b4c90530298b545e/html5/thumbnails/122.jpg)
/RCacheaux/Parallax
![Page 124: Parallactic Collection Views](https://reader033.vdocument.in/reader033/viewer/2022052822/554bc515b4c90530298b545e/html5/thumbnails/124.jpg)