All Projects → mkosir → React Parallax Tilt

mkosir / React Parallax Tilt

Licence: mit
👀 Easily apply tilt hover effect on React components - lightweight/zero dependencies

Programming Languages

javascript
184084 projects - #8 most used programming language
typescript
32286 projects

Projects that are alternatives of or similar to React Parallax Tilt

Sensor Data Logger
Android Wear sensor data plotter
Stars: ✭ 166 (-31.69%)
Mutual labels:  sensor
Onewirehub
OneWire slave device emulator
Stars: ✭ 195 (-19.75%)
Mutual labels:  sensor
Rvparallaximageview
RvParallaxImageView用在recyclerview的item中,它可以随着recyclerview进行视差效果的移动,进而可以在一个小区域的item中展示一个完整的图片。适用于在recyclerview的item中显示大的广告图。
Stars: ✭ 224 (-7.82%)
Mutual labels:  parallax
Bh1750
An Arduino library for the digital light sensor breakout boards containing the BH1750FVI IC
Stars: ✭ 173 (-28.81%)
Mutual labels:  sensor
I2c Moisture Sensor
I2C based soil moisture sensor
Stars: ✭ 194 (-20.16%)
Mutual labels:  sensor
React Native Proximity
📱 A React Native wrapper that provides access to the proximity sensor on iOS and Android.
Stars: ✭ 201 (-17.28%)
Mutual labels:  sensor
Angular Web Bluetooth
The missing Web Bluetooth module for Angular
Stars: ✭ 164 (-32.51%)
Mutual labels:  sensor
Parallaxrecyclerview
Parallax effect on every item of your RecyclerView.
Stars: ✭ 237 (-2.47%)
Mutual labels:  parallax
Micropython Fusion
Sensor fusion calculating yaw, pitch and roll from the outputs of motion tracking devices
Stars: ✭ 194 (-20.16%)
Mutual labels:  sensor
Sense Js
📱 html5 sensor interaction library for mobile
Stars: ✭ 219 (-9.88%)
Mutual labels:  sensor
Home Assistant Config Fr
🏠Configuration de Home Assistant en français. 👨🏻‍💻 N'hésitez pas à ⭐ mon repo et à copier les bonnes idées ! 🇨🇵
Stars: ✭ 175 (-27.98%)
Mutual labels:  sensor
Iio Sensor Proxy
IIO accelerometer sensor to input device proxy
Stars: ✭ 192 (-20.99%)
Mutual labels:  sensor
React Native Stretchy
🤸‍♀️A ReactNative scrollable stretchy header component
Stars: ✭ 216 (-11.11%)
Mutual labels:  parallax
Flutter parallax scroll
Flutter UI challenge- Parallax scroll effect
Stars: ✭ 172 (-29.22%)
Mutual labels:  parallax
Backgroundvideo
A lightweight parallax background video solution that behaves like the CSS3 property, background-size: cover
Stars: ✭ 234 (-3.7%)
Mutual labels:  parallax
Bme680 Python
Python library for the BME680 gas, temperature, humidity and pressure sensor.
Stars: ✭ 167 (-31.28%)
Mutual labels:  sensor
Gravity View
Introducing Gravity View: Because swiping is so yesterday!
Stars: ✭ 200 (-17.7%)
Mutual labels:  sensor
Sensey
⚡ [Android Library] Play with sensor events & detect gestures in a breeze.
Stars: ✭ 2,621 (+978.6%)
Mutual labels:  sensor
Slidemenulayout
🔥An android slide menu that supports left and right swipes and slides with parallax.(一个支持左右滑动并带有视差滑动效果的安卓侧滑菜单控件.仿[QQ/探探侧滑])
Stars: ✭ 235 (-3.29%)
Mutual labels:  parallax
Aksidemenu
Beautiful iOS side menu library with parallax effect. Written in Swift
Stars: ✭ 216 (-11.11%)
Mutual labels:  parallax

React Tilt

npm version npm downloads npm bundle size Build Status Codecov Coverage prettier TypeScript

👀 Easily apply tilt hover effect on React components

Demo

Demos created with React DemoTab 📑

Install

npm install react-parallax-tilt

Features

  • Lightweight (3.8kB), zero dependencies 📦
  • Supports mouse and touch events
  • Support for device tilting (gyroscope)
  • Glare effect 🌟 with custom props (color, position,...) 🔗demo
  • Events to keep track of component values 📐 (tilt, glare, mousemove,...) 🔗demo
  • Many effects and functionalities that can be easily applied:
    • scale on hover 🔗demo
    • disable x/y axis 🔗demo
    • flip component vertically/horizontally 🔗demo
    • tilt hover effect on the whole window 🔗demo
    • tilt component with custom manual input 🕹 (joystick, slider etc.) 🔗demo
    • parallax effect on overlaid images 🔗demo

Example

import React from 'react';
import ReactDOM from 'react-dom';
import Tilt from 'react-parallax-tilt';

const App = () => {
  return (
    <Tilt>
      <div style={{ height: '300px', backgroundColor: 'darkgreen' }}>
        <h1>React Parallax Tilt 👀</h1>
      </div>
    </Tilt>
  );
};

ReactDOM.render(<App />, document.getElementById('root'));

Props

All of the props are optional.
Below is the complete list of possible props and their options:

▶︎ indicates the default value if there's one

tiltEnable: boolean ▶︎ true
Boolean to enable/disable tilt effect.

tiltReverse: boolean ▶︎ false
Reverse the tilt direction.

tiltAngleXInitial: number ▶︎ 0
Initial tilt value (degrees) on x axis.

tiltAngleYInitial: number ▶︎ 0
Initial tilt value (degrees) on y axis.

tiltMaxAngleX: number ▶︎ 20
Range: 0 - 90
Max tilt rotation (degrees) on x axis.

tiltMaxAngleY: number ▶︎ 20
Range: 0 - 90
Max tilt rotation (degrees) on y axis.

tiltAxis: Axis | null ▶︎ null
Axis = 'x' | 'y'
Which axis should be enabled. If null both are enabled.

tiltAngleXManual: number | null} ▶︎ null
Manual tilt rotation (degrees) on x axis.

tiltAngleYManual: number | null} ▶︎ null
Manual tilt rotation (degrees) on y axis.

glareEnable: boolean ▶︎ false
Boolean to enable/disable glare effect.

glareMaxOpacity: number ▶︎ 0.7
Range: 0 - 1
The maximum glare opacity (0.5 = 50%, 1 = 100%, etc.).

glareColor: string ▶︎ #ffffff
Set color of glare effect.

glarePosition: GlarePosition ▶︎ bottom
GlarePosition = 'top' | 'right' | 'bottom' | 'left' | 'all'
Set position of glare effect.

glareReverse: boolean ▶︎ false
Reverse the glare direction.

scale: number ▶︎ 1
Scale of the component (1.5 = 150%, 2 = 200%, etc.).

perspective: number ▶︎ 1000
The perspective property defines how far the object (wrapped/child component) is away from the user.
The lower the more extreme the tilt gets.

flipVertically: boolean ▶︎ false
Boolean to enable/disable vertical flip of component.

flipHorizontally: boolean ▶︎ false
Boolean to enable/disable horizontal flip of component.

reset: boolean ▶︎ true
If the effects has to be reset on onLeave event.

transitionEasing: string ▶︎ cubic-bezier(.03,.98,.52,.99)
Easing of the transition when manipulating the component.

transitionSpeed: number ▶︎ 400
Speed of the transition when manipulating the component.

trackOnWindow: boolean ▶︎ false
Track mouse and touch events on the whole window.

gyroscope: boolean ▶︎ false
Boolean to enable/disable device orientation detection.

onMove: Function => (tiltAngleX: number, tiltAngleY: number, tiltAngleXPercentage: number, tiltAngleYPercentage: number, glareAngle: number, glareOpacity: number, eventType: string | null)
Gets triggered when user moves on the component.

onEnter: Function => (eventType: string | null)
Gets triggered when user enters the component.

onLeave: Function => (eventType: string | null)
Gets triggered when user leaves the component.

Gyroscope - Device Orientation

Please keep in mind that detecting device orientation is currently experimental technology.
Check the browser compatibility before using this in production.
A few takeaways when using device orientation event:

  • always use secure origins (such as https)
  • it doesn't work in all browsers when using it in cross-origin <iframe> element
Using device orientation on iOS 13+

Apple decided turning device motion and orientation off by default since iOS 12.2.
With iOS 13+ permission API can be used to gain access to device orientation event.

When using gyroscope feature:

<Tilt gyroscope={true}>
  <h1>React Parallax Tilt 👀</h1>
</Tilt>

it will present a permission dialog prompting the user to allow motion and orientation access at domain level:

Note that user needs to take some action (like tapping a button) to be able to display the dialog (invoking dialog on page load is not possible).

Development

Easily set up a local development environment!

Build all the examples and start storybook server on localhost:9009:

  • clone
  • npm install
  • npm start

Start coding! 🎉

Or setup with npm link Clone this repo on your machine, navigate to its location in the terminal and run:
npm install
npm link # link your local repo to your global packages
npm run build:watch # build the files and watch for changes

Clone project repo that you wish to test with react-parallax-tilt library and run:

npm install
npm link react-parallax-tilt # link your local copy into this project's node_modules
npm start

Contributing

All contributions are welcome!
Please take a moment to review guidelines PR | Issues

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].