keske / React Parallax Component
Easiest way to add scroll parallax effect on the component
Stars: ✭ 143
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to React Parallax Component
Parallaxview
Parallax view for android apps written in Kotlin
Stars: ✭ 70 (-51.05%)
Mutual labels: parallax
Vue Parallax Js
Tiny vue component that adds a directive for parallax effect on elements.
Stars: ✭ 107 (-25.17%)
Mutual labels: parallax
React Stickyroll
A react implementation of stickyroll (original)
Stars: ✭ 132 (-7.69%)
Mutual labels: parallax
Rn Falcon App Intro
rn-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...
Stars: ✭ 82 (-42.66%)
Mutual labels: parallax
Rolly
Custom scroll with inertia, smooth parallax and scenes manager
Stars: ✭ 109 (-23.78%)
Mutual labels: parallax
Viewpagertransformer
Viewpager动画,包括渐变,旋转,缩放,3D,立方体等多种酷炫效果动画,实现原理是自定义ViewpagerTransformer,当然你也可以自定义多种动画
Stars: ✭ 62 (-56.64%)
Mutual labels: parallax
Vue Prlx
🔮 Vue.js parallax directive you were looking for (can animate translate & background-position)
Stars: ✭ 140 (-2.1%)
Mutual labels: parallax
React Native Swipeable Parallax Carousel
React Native Swipeable Parallax Carousel
Stars: ✭ 98 (-31.47%)
Mutual labels: parallax
Flutter Ui Designs
Just collection of UI designs build with flutter. Can run on any mobile, web & desktop.
Stars: ✭ 131 (-8.39%)
Mutual labels: parallax
Parallaxswiftui
Add a motion parallax effect to your SwiftUI views to add some depth to your UI
Stars: ✭ 88 (-38.46%)
Mutual labels: parallax
Parallaxscrollingview
Parallax scrolling either by offset or automatically.
Stars: ✭ 91 (-36.36%)
Mutual labels: parallax
React Scroll Parallax
🔮 React components to create parallax scroll effects for banners, images or any other DOM elements
Stars: ✭ 1,699 (+1088.11%)
Mutual labels: parallax
Parallax Vanilla
Seamless and lightweight parallax scrolling library implemented in pure JavaScript utilizing Hardware acceleration for extra performance.
Stars: ✭ 81 (-43.36%)
Mutual labels: parallax
Materialviewpager
A Material Design ViewPager easy to use library
Stars: ✭ 8,224 (+5651.05%)
Mutual labels: parallax
Arsegmentpager
segment tab controller with parallax Header
Stars: ✭ 1,691 (+1082.52%)
Mutual labels: parallax
React Parallax Component
Easiest way to add scroll parallax effect on the component.
Installation
npm install react-parallax-component
Usage
import ParallaxComponent from 'react-parallax-component';
<ParallaxComponent
speed="0.003"
width="300"
top="40%"
left="100"
>
<div>
Children component
</div>
</ParallaxComponent>
Props
-
speed(String) - animation speed, default:-0.03 -
width(String) - component width, default:auto -
height(String) - component height, default:auto -
top(String) - component top position, default:inherit -
left(String) - component left position, default:inherit -
right(String) - component top position, default:inherit
Development
$ npm install
Run app
$ npm start
And open in browser: http://localhost:4000
Build
$ npm run build
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].