Security News
How Threat Actors are Abusing GitHub’s File Upload Feature to Host Malware
GitHub is susceptible to a CDN flaw that allows attackers to host malware on any public repository.
universal-tilt.js
Advanced tools
Changelog
2.0.6 (2019-06-17)
platform
is now built-inReadme
JavaScript & jQuery elements movement library based on:
Tilt.js by Gijs Rogé and vanilla-tilt.js by Șandor Sergiu
universal-tilt.js contains additional functions for mobile devices with gyroscope, new Position Base option and more!
If you use React, install component with the implementation of the universal-tilt.js library! More here
First, install the library in your project by npm:
$ npm install universal-tilt.js
Or Yarn:
$ yarn add universal-tilt.js
You can also connect script via one of CDNs:
bundle.run: https://bundle.run/universal-tilt.js
jsDelivr: https://cdn.jsdelivr.net/npm/universal-tilt.js/
unpkg: https://unpkg.com/universal-tilt.js/
Connect libary with project using script tag in HTML:
<script src="/path/to/universal-tilt.js"></script>
ES6 import:
import UniversalTilt from 'universal-tilt.js';
Or CommonJS:
const UniversalTilt = require('universal-tilt.js');
Next use library with:
• Vanilla JavaScript e.g:
const elems = document.querySelectorAll('.tilt');
const tilt = UniversalTilt.init({
elements: elems,
settings: {
// options...
},
callbacks: {
// callbacks...
}
});
• or jQuery e.g:
Connect jQuery in HTML
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
Or include via command line and CommonJS
$ npm install jquery
$ yarn add jquery
$ bower install jquery
const jQuery = require('jquery');
And call plugin on element
$('.tilt').universalTilt({
settings: {
// options...
},
callbacks: {
// callbacks...
}
});
• Plugin supports autoinit
To use it, add data-tilt
to html element e.g:
<div data-tilt></div>
• Destroy method
elems.universalTilt.destroy();
• Get values method
elems.universalTilt.getValues();
• Reset method
elems.universalTilt.reset();
Name | Type | Default | Description | Available options |
---|---|---|---|---|
base | string | element | The surface from which the location of the mouse is captured | element or window |
disabled | string | null | Disable axis | x or y |
easing | string | cubic-bezier(.03, .98, .52, .99) | Transition easing | cubic-bezier /ease /linear /etc. |
exclude | RegExp | null | Disable tilt effect on selected user agents | e.g: /(Firefox|iPad)/ |
max | number | 35 | Max tilt value | e.g: 28 |
perspective | number | 1000 | Tilt effect perspective | e.g: 700 |
reset | boolean | true | Enable/disable element position reset after mouseout | true (enable), false (disable) |
reverse | boolean | false | Reverse tilt effect directory | true (reverse directory), false (standard directory) |
scale | number | 1.0 | Element scale on mouseover | 0.9 /1.3 /etc. |
shine | boolean | false | Add/remove shine effect on mouseover | true (add), false (remove) |
shine-opacity1 | number | 0 | Add/remove shine effect on mouseover | values >= 0 and <= 1 |
shine-save1 | boolean | false | Save/reset shine effect on mouseout | true (save), false (reset) |
speed | number | 300 | Transition speed (ms) | e.g: 500 |
Name | Description | Available options |
---|---|---|
onDestroy | Callback on plugin destroy | el => { /* code */ } |
onDeviceMove2 | Callback on device move | el => { /* code */ } |
onInit | Callback on plugin init | el => { /* code */ } |
onMouseEnter | Callback on mouse enter | el => { /* code */ } |
onMouseLeave | Callback on mouse leave | el => { /* code */ } |
onMouseMove | Callback on mouse move | el => { /* code */ } |
1 shine value must be true
2 only for devices supported device motion
tiltChange
event will output the x, y & angle of tilting
This project is licensed under the MIT License © 2018-present Jakub Biesiada
FAQs
Parallax tilt effect library
The npm package universal-tilt.js receives a total of 409 weekly downloads. As such, universal-tilt.js popularity was classified as not popular.
We found that universal-tilt.js 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.
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.
Security News
GitHub is susceptible to a CDN flaw that allows attackers to host malware on any public repository.
Security News
At Node Congress, Socket CEO Feross Aboukhadijeh uncovers the darker aspects of open source, where applications that rely heavily on third-party dependencies can be exploited in supply chain attacks.
Research
Security News
The Socket Research team found this npm package includes code for collecting sensitive developer information, including your operating system username, Git username, and Git email.