jonathandion / React Tilt
👓 Parallax tilt hover effect for React JS - tilt.js
Stars: ✭ 254
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to React Tilt
gh-web-ui
Package for building web-based User Interfaces (UI) in Rhino Grasshopper.
Stars: ✭ 69 (-72.83%)
Mutual labels: dom, 3d
Curtainsjs
curtains.js is a lightweight vanilla WebGL javascript library that turns HTML DOM elements into interactive textured planes.
Stars: ✭ 1,039 (+309.06%)
Mutual labels: 3d, dom
Uav Mapper
UAV-Mapper is a lightweight UAV Image Processing System, Visual SFM reconstruction or Aerial Triangulation, Fast Ortho-Mosaic, Plannar Mosaic, Fast Digital Surface Map (DSM) and 3d reconstruction for UAVs.
Stars: ✭ 106 (-58.27%)
Mutual labels: 3d, dom
Bforartists
Bforartists is a fork of the popular 3D software Blender, with the goal to improve the UI.
Stars: ✭ 240 (-5.51%)
Mutual labels: 3d
Mogwai
The minimalist, obvious, graphical, web application interface
Stars: ✭ 249 (-1.97%)
Mutual labels: dom
Angular Ru Interview Questions
Вопросы на собеседовании по Angular
Stars: ✭ 224 (-11.81%)
Mutual labels: dom
Render Py
A software 3D renderer written in Python. (Purely educational)
Stars: ✭ 240 (-5.51%)
Mutual labels: 3d
Pugixml
Light-weight, simple and fast XML parser for C++ with XPath support
Stars: ✭ 2,809 (+1005.91%)
Mutual labels: dom
Lunasvg
A standalone c++ library to create, animate, manipulate and render SVG files.
Stars: ✭ 243 (-4.33%)
Mutual labels: dom
Lite Virtual List
Virtual list component library supporting waterfall flow based on vue
Stars: ✭ 223 (-12.2%)
Mutual labels: dom
Openswe1r
An Open-Source port of the 1999 Game "Star Wars Episode 1: Racer"
Stars: ✭ 236 (-7.09%)
Mutual labels: 3d
Skrape.it
A Kotlin-based testing/scraping/parsing library providing the ability to analyze and extract data from HTML (server & client-side rendered). It places particular emphasis on ease of use and a high level of readability by providing an intuitive DSL. It aims to be a testing lib, but can also be used to scrape websites in a convenient fashion.
Stars: ✭ 231 (-9.06%)
Mutual labels: dom
Genre Shapehd
Code and Data Release for GenRe (NeurIPS 2018) and ShapeHD (ECCV 2018)
Stars: ✭ 241 (-5.12%)
Mutual labels: 3d
React.js - Tilt.js
React version of tilt.js
Demo
https://vx-demo.now.sh/gallery
Install
-
yarn:
yarn add react-tilt -
npm:
npm install --save react-tilt
Usage
import Tilt from 'react-tilt'
<Tilt className="Tilt" options={{ max : 25 }} style={{ height: 250, width: 250 }} >
<div className="Tilt-inner"> 👽 </div>
</Tilt>
Options
{
reverse: false, // reverse the tilt direction
max: 35, // max tilt rotation (degrees)
perspective: 1000, // Transform perspective, the lower the more extreme the tilt gets.
scale: 1.1, // 2 = 200%, 1.5 = 150%, etc..
speed: 1000, // Speed of the enter/exit transition
transition: true, // Set a transition on enter/exit.
axis: null, // What axis should be disabled. Can be X or Y.
reset: true // If the tilt effect has to be reset on exit.
easing: "cubic-bezier(.03,.98,.52,.99)", // Easing on enter/exit.
}
API
| Property | Signature |
|---|---|
| onMouseEnter | () -> SyntheticEvent |
| onMouseMove | () -> SyntheticEvent |
| onMouseLeave | () -> SyntheticEvent |
| options | Object |
Roadmap
- Tests
- Add Flare effect
Alternatives
- JQuery JS version: https://github.com/gijsroge/tilt.js
- Vanilla JS version: https://github.com/micku7zu/vanilla-tilt.js
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].