MCPcopy
hub / github.com/micku7zu/vanilla-tilt.js

github.com/micku7zu/vanilla-tilt.js @1.8.1 sqlite

repository ↗ · DeepWiki ↗ · release 1.8.1 ↗
55 symbols 122 edges 5 files 11 documented · 20%
README

vanilla-tilt.js

npm version

A smooth 3D tilt javascript library forked from Tilt.js (jQuery version).

View landing page (demos)

Usage

<body>









<script type="text/javascript" src="https://github.com/micku7zu/vanilla-tilt.js/raw/1.8.1/vanilla-tilt.js"></script>
</body>

If you want to use this library in IE, you need to include a CustomEvent polyfill: https://github.com/micku7zu/vanilla-tilt.js/issues/49#issuecomment-482711876 or maybe consider the jQuery version.

Options

{
    reverse:                false,  // reverse the tilt direction
    max:                    15,     // max tilt rotation (degrees)
    startX:                 0,      // the starting tilt on the X axis, in degrees.
    startY:                 0,      // the starting tilt on the Y axis, in degrees.
    perspective:            1000,   // Transform perspective, the lower the more extreme the tilt gets.
    scale:                  1,      // 2 = 200%, 1.5 = 150%, etc..
    speed:                  300,    // Speed of the enter/exit transition
    transition:             true,   // Set a transition on enter/exit.
    axis:                   null,   // What axis should be enabled. Can be "x" or "y".
    reset:                  true,   // If the tilt effect has to be reset on exit.
    "reset-to-start":       true,   // Whether the exit reset will go to [0,0] (default) or [startX, startY]
    easing:                 "cubic-bezier(.03,.98,.52,.99)",    // Easing on enter/exit.
    glare:                  false,  // if it should have a "glare" effect
    "max-glare":            1,      // the maximum "glare" opacity (1 = 100%, 0.5 = 50%)
    "glare-prerender":      false,  // false = VanillaTilt creates the glare elements for you, otherwise
                                    // you need to add .js-tilt-glare>.js-tilt-glare-inner by yourself
    "mouse-event-element":  null,   // css-selector or link to an HTML-element that will be listening to mouse events
    "full-page-listening":  false,  // If true, parallax effect will listen to mouse move events on the whole document, not only the selected element
    gyroscope:              true,   // Boolean to enable/disable device orientation detection,
    gyroscopeMinAngleX:     -45,    // This is the bottom limit of the device angle on X axis, meaning that a device rotated at this angle would tilt the element as if the mouse was on the left border of the element;
    gyroscopeMaxAngleX:     45,     // This is the top limit of the device angle on X axis, meaning that a device rotated at this angle would tilt the element as if the mouse was on the right border of the element;
    gyroscopeMinAngleY:     -45,    // This is the bottom limit of the device angle on Y axis, meaning that a device rotated at this angle would tilt the element as if the mouse was on the top border of the element;
    gyroscopeMaxAngleY:     45,     // This is the top limit of the device angle on Y axis, meaning that a device rotated at this angle would tilt the element as if the mouse was on the bottom border of the element;
    gyroscopeSamples:       10      // How many gyroscope moves to decide the starting position.
}

Events

const element = document.querySelector(".js-tilt");
VanillaTilt.init(element);
element.addEventListener("tiltChange", callback);

Methods

const element = document.querySelector(".js-tilt");
VanillaTilt.init(element);

// Destroy instance
element.vanillaTilt.destroy();

// Get values of instance
element.vanillaTilt.getValues();

// Reset instance
element.vanillaTilt.reset();

// It also supports NodeList
const elements = document.querySelectorAll(".js-tilt");
VanillaTilt.init(elements);

Install

You can copy and include any of the following file:

NPM

Also available on npm https://www.npmjs.com/package/vanilla-tilt

npm install vanilla-tilt

Import it using

import VanillaTilt from 'vanilla-tilt';

Known issues

Credits

Original library: Tilt.js

Original library author: Gijs Rogé

Contributors

Other projects

Quick Cursor: One-Handed mode (Android app)

Play Store link: https://play.google.com/store/apps/details?id=com.quickcursor

Buy me a beer 🍻

If you want to thank me for vanilla-tilt.js or Quick Cursor Android app, you can donate on PayPal: https://www.paypal.me/micku7zu?locale.x=en_US

License

MIT License

Extension points exported contracts — how you extend this code

TiltOptions (Interface)
(no doc)
vanilla-tilt.d.ts
TiltValues (Interface)
(no doc)
vanilla-tilt.d.ts
HTMLVanillaTiltElement (Interface)
(no doc)
vanilla-tilt.d.ts

Core symbols most depended-on inside this repo

isSettingTrue
called by 10
lib/vanilla-tilt.es2015.js
isSettingTrue
called by 5
src/vanilla-tilt.js
resetGlare
called by 4
lib/vanilla-tilt.es2015.js
updateElementPosition
called by 4
lib/vanilla-tilt.es2015.js
updateGlareSize
called by 4
lib/vanilla-tilt.es2015.js
updateClientSize
called by 4
lib/vanilla-tilt.es2015.js
setTransition
called by 4
lib/vanilla-tilt.es2015.js
getElementListener
called by 2
lib/vanilla-tilt.es2015.js

Shape

Method 44
Class 6
Interface 3
Function 2

Languages

TypeScript100%

Modules by API surface

src/vanilla-tilt.js24 symbols
lib/vanilla-tilt.es2015.js24 symbols
vanilla-tilt.d.ts5 symbols
lib/vanilla-tilt.js2 symbols

Dependencies from manifests, versioned

babel-cli6.26.0 · 1×
babel-plugin-add-module-exports0.2.1 · 1×
babel-plugin-external-helpers6.22.0 · 1×
babel-plugin-transform-class-properties6.22.0 · 1×
babel-plugin-transform-runtime6.22.0 · 1×
babel-preset-es20156.22.0 · 1×
babel-preset-stage-06.22.0 · 1×
babelrc-rollup3.0.0 · 1×
cash-cp0.2.0 · 1×
cross-env3.1.4 · 1×
gh-pages4.0.0 · 1×
release-script1.0.2 · 1×

For agents

$ claude mcp add vanilla-tilt.js \
  -- python -m otcore.mcp_server <graph>

⬇ download graph artifact