Parallax Scrolling has been used frequently in the Web, especially in Landing pages.
In addition to the Layout for pictures, I would like to post some pictures for you. I would like to post pictures for you to see.
Roll parallax effect
Do scroll parallax animation
Parallax effect principle
Imagine that our “eyes” now see the “landscape” through a “window,” and when at least one of them moves up and down, the part of the landscape that can be seen changes.
To achieve this effect on a mobile phone screen, we need to prepare an image larger than the Cell
The screen is our eye, and the screen cannot move, so we can create a parallax effect by moving the Cell or ImageView. The size of the ImageView is 30px (140px — 110px) larger than the Cell, which is the parallax range. After all, we want no content outside the image.
Implementation steps
Let’s say we’re using a UICollectionView and want the image in the cell to look like a parallax scroll as we slide.
We take the center of the View as the standard,
- When the Cell is in the middle of the CollectionView, the ImageView center is also in the center of the Cell.
- When the Cell is at the top of the CollectionView, the ImageView is at the top.
- When the Cell is under the CollectionView, the ImageView is under the CollectionView.
UIScrollViewDelegate
To achieve this effect, we first need to implement the UIScrollViewDelegate method, which informs all cells on the screen when the screen slides.
// MARK: UIScrollViewDelegate extension HomeViewController: UIScrollViewDelegate { func scrollViewDidScroll(_ scrollView: UIScrollView) {// When UICollectionView is dragged, Notice appeared on the screen of the cell for the cell in aCollectionView. VisibleCells {if let homeCell = cell as? HomeCell { homeCell.cellOnTableView(collectionView: aCollectionView, didScrollOnView: view) } } } }Copy the codeCell
Provide a method in the Cell to calculate the Cell’s displacement from the center point in the coordinate system of the View(superView of the CollectionView).
Use this displacement to calculate the parallax shift ratio and change the current imageView frame.
Func cellOnTableView (collectionView: UICollectionView, didScrollOnView view: UIView) {/ / cell in collectionView, RectInSuperview = collectionView.convert(self.frame, to: // Let distanceFromCenter = view.frame.height/2 - rectinsuperview. minY Let parallaxHeight = imageView.frame. Height - frame. Height // parallaxHeight = imageView.frame. Let move = (distanceFromCenter/view.frame.height) * parallaxHeight // parallaxHeight /2 Var imageRect = imageview.frame imageRect. Origin. Y = -(parallaxHeight/2) + move // Give the imageView a new frame to achieve the parallax effect. imageView.frame = imageRect }Copy the codeIn order for the image to have the correct frame when it is first rendered, we trigger the cell to calculate the frame when the image is first rendered.
Override func viewDidAppear(_ animated: Bool) {// Offset scrollViewDidScroll(aCollectionView)}Copy the codeRecommendation and Reference
- Welcome to share this article “Swift implementation Parallax Scrolling effect (Parallax Scrolling)” – https://ios.devdon.com/archives/643
- Learn more about UIView’s coordinate system and its transformation method.
- SourceCode — “Swift Implements Rolling Parallax Effect” on Gihub