Research
Security News
Malicious npm Package Targets Solana Developers and Hijacks Funds
A malicious npm package targets Solana developers, rerouting funds in 2% of transactions to a hardcoded address.
By Socket Research Team - Dec 02, 2024
Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
vanilla-tilt
Advanced tools
vanilla-tilt.js
A smooth 3D tilt javascript library forked from Tilt.js (jQuery version).
Usage
<body>
<!-- your markup element -->
<div class="your-element" data-tilt></div>
<!-- at the end of the body -->
<script type="text/javascript" src="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:
- dist/vanilla-tilt.js ~ 15kb
- dist/vanilla-tilt.min.js ~ 8.5kb
- dist/vanilla-tilt.babel.js ~ 16.5kb
- dist/vanilla-tilt.babel.min.js ~ 9.5kb
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
- Livio Brunner <contact@brunnerliv.io> (Typings & Glare Effect)
- Oleg Postoev
- Matteo Rigon (Device orientation support)
- Corey Austin (Initial gyroscope position)
- Sander Moolin
- rrroyal (Whole document mouse events listening)
- Andžs Pilskalns ("reset-to-start" feature)
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
FAQs
A smooth 3D tilt javascript library forked from Tilt.js
The npm package vanilla-tilt receives a total of 35,403 weekly downloads. As such, vanilla-tilt popularity was classified as popular.
We found that vanilla-tilt demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Package last updated on 15 Aug 2023
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Related posts
Security News
Research
Typosquatting Cryptographic Libraries: Malicious npm Packages Threaten Crypto Developers with Keylogging and Wallet Theft
Socket researchers have discovered malicious npm packages targeting crypto developers, stealing credentials and wallet data using spyware delivered through typosquats of popular cryptographic libraries.
By Kirill Boychenko - Nov 27, 2024
Security News
Weekly Downloads Now Available in npm Package Search Results
Socket's package search now displays weekly downloads for npm packages, helping developers quickly assess popularity and make more informed decisions.
By Sarah Gooding - Nov 26, 2024