All Projects → micku7zu → Vanilla Tilt.js

micku7zu / Vanilla Tilt.js

Licence: mit
A smooth 3D tilt javascript library.

Programming Languages

javascript
184084 projects - #8 most used programming language
HTML
75241 projects

Projects that are alternatives of or similar to Vanilla Tilt.js

Bunny
BunnyJS - Lightweight native (vanilla) JavaScript (JS) and ECMAScript 6 (ES6) browser library, package of small stand-alone components without dependencies: FormData, upload, image preview, HTML5 validation, Autocomplete, Dropdown, Calendar, Datepicker, Ajax, Datatable, Pagination, URL, Template engine, Element positioning, smooth scrolling, routing, inversion of control and more. Simple syntax and architecture. Next generation jQuery and front-end framework. Documentation and examples available.
Stars: ✭ 473 (-83.41%)
Mutual labels:  library, vanilla-javascript, vanilla
curved-menu
VanillaJS fully configurable curved menu (circular navigation)
Stars: ✭ 30 (-98.95%)
Mutual labels:  vanilla, vanilla-javascript
Perspective
🖼Parallax scrolling effect. And more.
Stars: ✭ 80 (-97.19%)
Mutual labels:  vanilla-javascript, tilt-effect
Medium Zoom
🔎🖼 A JavaScript library for zooming images like Medium
Stars: ✭ 2,799 (-1.82%)
Mutual labels:  vanilla-javascript, vanilla
Vanilla Ui Router
Simple vanilla JavaScript router
Stars: ✭ 42 (-98.53%)
Mutual labels:  vanilla-javascript, vanilla
Sharer.js
🔛 🔖 Create your own social share buttons. No jquery.
Stars: ✭ 1,624 (-43.04%)
Mutual labels:  vanilla-javascript, vanilla
Vanilla Semantic Ui
Semantic UI component framework without jQuery
Stars: ✭ 97 (-96.6%)
Mutual labels:  vanilla-javascript, vanilla
Round Anything
A set of OpenSCAD utilities for adding radii and fillets, that embodies a robust approach to developing OpenSCAD parts.
Stars: ✭ 122 (-95.72%)
Mutual labels:  library, smooth
Ptimagealbumviewcontroller
"Image Album" — or "Photo Album" if you like that better — View( Controller) for all crazy iOS developers out there...
Stars: ✭ 199 (-93.02%)
Mutual labels:  library
Store
A beautifully-simple framework-agnostic modern state management library.
Stars: ✭ 204 (-92.84%)
Mutual labels:  library
Messenger4j
A Java library for building Chatbots on the Facebook Messenger Platform - easy and fast.
Stars: ✭ 199 (-93.02%)
Mutual labels:  library
Beanstalk
Minimalistic PHP client for beanstalkd without any dependencies
Stars: ✭ 199 (-93.02%)
Mutual labels:  library
Onednn
oneAPI Deep Neural Network Library (oneDNN)
Stars: ✭ 2,600 (-8.8%)
Mutual labels:  library
Androiddevicenames
A tiny Android library that transforms the device model name into something users can understand.
Stars: ✭ 198 (-93.06%)
Mutual labels:  library
Lpd8806
Arduino library for LED strips and pixels using LPD8806 (and probably LPD8803/LPD8809)
Stars: ✭ 207 (-92.74%)
Mutual labels:  library
Duaef duik
Duduf After Effects Framework | Duik
Stars: ✭ 197 (-93.09%)
Mutual labels:  library
Str
A fast, solid and strong typed string manipulation library with multibyte support
Stars: ✭ 199 (-93.02%)
Mutual labels:  library
Svelte Component Template
A base for building shareable Svelte 3 components
Stars: ✭ 208 (-92.7%)
Mutual labels:  library
Vuent
🎨 Vue.js components implementing Microsoft Fluent Design
Stars: ✭ 207 (-92.74%)
Mutual labels:  library
Navigation Stack
NavigationStack is a stack-modeled UI navigation controller. Swift UI library made by @Ramotion
Stars: ✭ 2,289 (-19.71%)
Mutual labels:  library

vanilla-tilt.js

npm version

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

View landing page (demos)

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 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.
    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 HTML-element what will be listen 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

License

MIT License

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].