Back to rankings

DroidsOnRoids/MPParallaxView

Swift

Apple TV Parallax effect in Swift.

parallaxswiftios
Star Growth
Stars
1.7k
Forks
96
Weekly Growth
Issues
1
1k1.5k
Nov 2015May 2019Dec 2022Jul 2026
README

MPParallaxView

Apple TV Parallax effect in Swift. Rotate view using touch or accelerometer.

Preview

Usage

To run the example project, clone the repo, and run pod install from the Example directory first.

Want to quickly look at demo? Type pod try MPParallaxView!

Parallax effect

You can easily customize Parallax View in Storyboard! Jump into Example project to look at properties.

How about accelerometer parallax instead of touch? Set Accelerometer Enabled to On in Storyboard.

There are 3 different ways to set up parallax:

  • .basedOnHierarchyInParallaxView - views in background moves less than views in foreground. You can increase the movement by changing multiplerOfIndexInHierarchyToParallaxOffset - this value will be multiplied by index of view in hierarchy. Default.
  • .basedOnTag - set a tag for a view. For instance, snowflakes image view has 13 tag which means noticeable movement. On the other hand, top view with cast members has 1 tag - almost no movement.
  • .custom(Int) - provide your custom value.

Requirements

Xcode 8, iOS 9

Installation

MPParallaxView is available through CocoaPods. To install it, simply add the following line to your Podfile:

pod "MPParallaxView"

Author

Michal Pyrka
Twitter: mikep_3

Other

Check out the article about this repo: Apple TV Parallax Effect in Swift

Inspired by Designmodo
Thanks Konstantine Trundayev for Interstellar assets!

License

The MIT License (MIT) Copyright (c) 2015 - 2017 Droids On Roids LLC

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

Related repositories
alexfoxy/lax.js

Simple & lightweight (<4kb gzipped) vanilla JavaScript library to create smooth & beautiful animations when you scroll.

JavaScriptnpmMIT Licenseparallaxscroll
10.5k481
locomotivemtl/locomotive-scroll

🛤 Detection of elements in viewport & smooth scrolling with parallax.

JavaScriptnpmMIT Licensesmooth-scrollingparallax
scroll.locomotive.ca
8.8k1.1k
florent37/MaterialViewPager

A Material Design ViewPager easy to use library

JavaMavenApache License 2.0materialandroid
fiches-plateau-moto.fr
8.1k1.5k
gijsroge/tilt.js

A tiny 60+fps parallax tilt hover effect for jQuery.

JavaScriptnpmMIT Licensetiltjquery
gijsroge.github.io/tilt.js/
3.9k842
nolimits4web/atropos

Stunning touch-friendly 3D parallax hover effects

JavaScriptnpmMIT Licensejavascriptgallery
atroposjs.com
3.6k107
FuYaoDe/react-native-app-intro

react-native-app-intro is a react native component implementing a parallax effect welcome page using base on react-native-swiper , similar to the one found in Google's app like Sheet, Drive, Docs...

JavaScriptnpmMIT Licensereact-nativeparallax
3.3k497
xmuSistone/ViewpagerTransition

viewpager with parallax pages, together with vertical sliding (or click) and activity transition

JavaMavenviewpagertransition
3k502
jscottsmith/react-scroll-parallax

🔮 React hooks and components to create parallax scroll effects for banners, images or any other DOM elements.

TypeScriptnpmMIT Licensereactparallax
react-scroll-parallax.damnthat.tv
3k155
geosigno/simpleParallax.js

Easy Parallax Effect for React & JavaScript

TypeScriptnpmMIT Licenseparallaxsimple
simpleparallax.com
2.2k149
netguru/sticky-parallax-header

A simple React Native library, enabling the creation of fully customized header for your iOS and Android apps.

TypeScriptnpmMIT Licenseopen-sourcecontribution
netguru.github.io/sticky-parallax-header/
2k202
AugustRush/ARSegmentPager

segment tab controller with parallax Header

Objective-CMIT Licenseparallax-headerobjective-c
1.7k265
ChrisCavs/rallax.js

Dead simple parallax scrolling.

JavaScriptnpmMIT Licenseparallax-scrollingparallax
chriscavs.github.io/rallax-demo/
1.5k48