Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://github.com/mkosir/react-parallax-tilt below:

GitHub - mkosir/react-parallax-tilt: 👀 Easily apply tilt hover effect to React components

👀 Easily apply tilt hover effects to React components

npm install react-parallax-tilt

• Lightweight 3kB, zero dependencies 📦
• Tree-shakable 🌳 ESM and CommonJS support
• Works with React v15 onwards
• Supports mouse and touch events
• Support for device tilting (gyroscope)
• Glare effect 🌟 with custom props (color, position, etc.) 🔗demo
• Event tracking for component values 📐 (tilt, glare, mousemove, etc.) 🔗demo
• Multiple built-in effects:
  • Scale on hover 🔗demo
  • Disable x/y axis 🔗demo
  • Flip component vertically/horizontally 🔗demo
  • Window tilt hover effect 🔗demo
  • Manual tilt control 🕹 (via joystick, slider, etc.) 🔗demo
  • Parallax effect for overlaid images 🔗demo

import Tilt from 'react-parallax-tilt';

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

All props are optional.
Here's the complete list of available props and their default values:

▶︎ indicates the default value

tiltEnable: boolean ▶︎ true
Enables/disables the tilt effect.

tiltReverse: boolean ▶︎ false
Reverses the tilt direction.

tiltAngleXInitial: number ▶︎ 0
Initial tilt angle (in degrees) on the x-axis.

tiltAngleYInitial: number ▶︎ 0
Initial tilt angle (in degrees) on the y-axis.

tiltMaxAngleX: number ▶︎ 20
Maximum tilt rotation (in degrees) on the x-axis. Range: 0°-90°.

tiltMaxAngleY: number ▶︎ 20
Maximum tilt rotation (in degrees) on the y-axis. Range: 0°-90°.

tiltAxis: 'x' | 'y' ▶︎ undefined
Enables tilt on a single axis only.

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

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

glareEnable: boolean ▶︎ false
Enables/disables the glare effect.

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

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

glarePosition: 'top' | 'right' | 'bottom' | 'left' | 'all' ▶︎ bottom
Sets the position of the glare effect.

glareReverse: boolean ▶︎ false
Reverses the glare direction.

glareBorderRadius: string ▶︎ 0
Sets the border radius of the glare. Accepts any standard CSS border radius value.

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

perspective: number ▶︎ 1000
Defines how far the tilt component appears from the user. Lower values create more extreme tilt effects.

flipVertically: boolean ▶︎ false
Enables/disables vertical flipping of the component.

flipHorizontally: boolean ▶︎ false
Enables/disables horizontal flipping of the component.

reset: boolean ▶︎ true
Determines if effects should reset on onLeave event.

transitionEasing: string ▶︎ cubic-bezier(.03,.98,.52,.99)
Easing function for the transition.

transitionSpeed: number ▶︎ 400
Speed of the transition.

trackOnWindow: boolean ▶︎ false
Tracks mouse and touch events across the entire window.

gyroscope: boolean ▶︎ false
Enables/disables device orientation detection.

onMove: ({ tiltAngleX: number, tiltAngleY: number, tiltAngleXPercentage: number, tiltAngleYPercentage: number, glareAngle: number, glareOpacity: number, event: Event }) => void
Callback triggered when user moves on the component.

onEnter: (event: Event) => void
Callback triggered when user enters the component.

onLeave: (event: Event) => void
Callback triggered when user leaves the component.

Please note that device orientation detection is currently experimental technology.
Check the browser compatibility before using it in production.
Important considerations when using device orientation:

• Always use secure origins (such as https)
• It may not work in all browsers when used within a cross-origin <iframe> element

Apple disabled device motion and orientation by default starting with iOS 12.2.
iOS 13+ provides a permission API to access device orientation events.

When using the gyroscope feature:

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

A permission dialog will prompt the user to allow motion and orientation access at the domain level:

Note: User interaction (like tapping a button) is required to display the permission dialog - it cannot be triggered automatically on page load.

Easily set up a local development environment!

Build project and start storybook on localhost:

• clone
• npm install
• npm start

Start coding! 🎉

1. Clone this repository and navigate to its location

2. Run the following commands:

   npm install
   npm link # link your local repo to your global packages
   npm run build:watch # build the files and watch for changes

3. Clone the project you want to test with react-parallax-tilt and run:

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

All contributions are welcome!
Please review contribution guidelines: Pull Requests | Issues

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4