mirror of
https://github.com/micku7zu/vanilla-tilt.js
synced 2024-06-03 14:22:13 +02:00
415 lines
19 KiB
HTML
415 lines
19 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width">
|
|
<title>Vanilla-tilt.js</title>
|
|
<link href="https://fonts.googleapis.com/css?family=Quicksand" rel="stylesheet">
|
|
<link href="style.css" rel="stylesheet">
|
|
<link href="src/prism.css" rel="stylesheet">
|
|
<script type="text/javascript" src="src/prism.js"></script>
|
|
</head>
|
|
<body>
|
|
|
|
<aside>
|
|
<a href="https://github.com/micku7zu/vanilla-tilt.js" class="logo" id="logo" data-tilt data-tilt-glare="true"
|
|
data-tilt-max-glare="0.5" data-tilt-speed="400"
|
|
data-tilt-scale="1.1" data-tilt-max="10" data-tilt-perspective="500">
|
|
<span>vanilla-tilt.js</span>
|
|
</a>
|
|
<h3>Credits </h3>
|
|
<h6>Original idea and author:</h6>
|
|
<a href="http://gijsroge.github.io/tilt.js/" class="logo" id="logoJquery" data-tilt data-tilt-glare="true"
|
|
data-tilt-max-glare="0.8" data-tilt-speed="400"
|
|
data-tilt-scale="1.1" data-tilt-max="10" data-tilt-perspective="500">
|
|
<span>tilt.js</span>
|
|
</a>
|
|
<br>
|
|
<h3>Contributors</h3>
|
|
<ul>
|
|
<li>
|
|
<a href="https://github.com/BrunnerLivio">Livio Brunner</a>
|
|
</li>
|
|
<li>
|
|
<a href="https://github.com/Dok11">Oleg Postoev</a>
|
|
</li>
|
|
<li>
|
|
<a href="https://github.com/matteo-rigon">Matteo Rigon</a>
|
|
</li>
|
|
<li>
|
|
<a href="https://github.com/lazyhummingbird">Corey Austin</a>
|
|
</li>
|
|
<li>
|
|
<a href="https://github.com/SaFrMo">Sander Moolin</a>
|
|
</li>
|
|
<li>
|
|
<a href="https://github.com/rrroyal">rrroyal</a>
|
|
</li>
|
|
<li>
|
|
<a href="https://github.com/Pilskalns">Andžs Pilskalns</a>
|
|
</li>
|
|
</ul>
|
|
<br>
|
|
<h3>Other projects</h3>
|
|
<a href="https://play.google.com/store/apps/details?id=com.quickcursor" title="Quick Cursor Android app" target="_blank" id="quickcursor" data-tilt
|
|
data-tilt-glare="true" data-tilt-max-glare="0.8" data-tilt-speed="400" data-tilt-scale="1.1" data-tilt-max="10"
|
|
data-tilt-perspective="500">
|
|
<div id="quickcursor-logo"></div>
|
|
</a>
|
|
<h6>One-Handed mode for Android</h6>
|
|
</aside>
|
|
<main>
|
|
<section>
|
|
<a href="https://github.com/micku7zu/vanilla-tilt.js" class="logo mobileLogo" id="logo" data-tilt
|
|
data-tilt-speed="400"
|
|
data-tilt-scale="1.1" data-tilt-max="10" data-tilt-perspective="500">
|
|
<span>vanilla-tilt.js</span>
|
|
</a>
|
|
<p>
|
|
A smooth 3D tilt javascript library forked from <a class="link" href="http://gijsroge.github.io/tilt.js/"
|
|
title="Tilt.js">Tilt.js (jQuery version)</a>
|
|
</p>
|
|
<ul>
|
|
<li>Smooth.</li>
|
|
<li>Lightweight.</li>
|
|
<li>60FPS.</li>
|
|
<li>VanillaJS.</li>
|
|
<li>No dependencies.</li>
|
|
<li>Easy to use</li>
|
|
</ul>
|
|
|
|
<br>
|
|
<iframe
|
|
src="https://platform.twitter.com/widgets/tweet_button.html?size=l&url=https%3A%2F%2Fmicku7zu.github.io%2Fvanilla-tilt.js%2Findex.html&via=micku7zu&related=micku7zu,GijsRoge&text=vanilla-tilt.js%20-%20A%20smooth%203D%20tilt%20javascript%20library.&hashtags="
|
|
width="75"
|
|
height="28"
|
|
scrolling="no"
|
|
title="Twitter Tweet Button"
|
|
style="border: 0; overflow: hidden;">
|
|
</iframe>
|
|
<iframe src="https://ghbtns.com/github-btn.html?user=micku7zu&repo=vanilla-tilt.js&type=star&count=true&size=large"
|
|
frameborder="0" scrolling="0" width="160px" height="30px"></iframe>
|
|
|
|
<br>
|
|
<h3>Download</h3>
|
|
<div>
|
|
<a class="downloadBox"
|
|
href="https://raw.githubusercontent.com/micku7zu/vanilla-tilt.js/master/dist/vanilla-tilt.js" data-tilt
|
|
data-tilt-max="20">
|
|
<div class="content">
|
|
<br> vanilla-tilt.js
|
|
<br> <span>~ 15kb</span>
|
|
</div>
|
|
</a>
|
|
<a class="downloadBox"
|
|
href="https://raw.githubusercontent.com/micku7zu/vanilla-tilt.js/master/dist/vanilla-tilt.min.js"
|
|
data-tilt data-tilt-max="20">
|
|
<div class="content">
|
|
<br> vanilla-tilt.min.js
|
|
<br> <span>~ 8.5kb</span>
|
|
</div>
|
|
</a>
|
|
<a class="downloadBox"
|
|
href="https://raw.githubusercontent.com/micku7zu/vanilla-tilt.js/master/dist/vanilla-tilt.babel.js"
|
|
data-tilt data-tilt-max="20">
|
|
<div class="content">
|
|
<br> vanilla-tilt.babel.js
|
|
<br> <span>~ 16.5kb</span>
|
|
</div>
|
|
</a>
|
|
<a class="downloadBox"
|
|
href="https://raw.githubusercontent.com/micku7zu/vanilla-tilt.js/master/dist/vanilla-tilt.babel.min.js"
|
|
data-tilt data-tilt-max="20">
|
|
<div class="content">
|
|
<br> vanilla-tilt.babel.min.js
|
|
<br> <span>~ 9.5kb</span>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
<p style="margin-top: -20px; font-size:13px;">Right click → Save as</p>
|
|
<h4>Also available on <a href="https://www.npmjs.com/package/vanilla-tilt" title="Vanilla-tilt.js">npm</a>:</h4>
|
|
<pre style="padding: 10px 10px;"><code>npm install vanilla-tilt</code></pre>
|
|
<h3>How to use</h3>
|
|
<div class="use">
|
|
<h4>Easy way</h4>
|
|
<pre><code class="language-markup"><body> <div class="your-element" data-tilt></div> <!-- at the end of the body --> <script type="text/javascript" src="vanilla-tilt.js"></script> </body></code></pre>
|
|
|
|
<h4>More options</h4>
|
|
<pre><code class="language-markup"><div class="your-element" data-tilt data-tilt-max="50" data-tilt-speed="400" data-tilt-perspective="500"></div></code></pre>
|
|
|
|
<h4>All options with defaults</h4>
|
|
<pre><code class="language-javascript">{
|
|
reverse: false, // reverse the tilt direction
|
|
max: 35, // 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 HTML-element what will be listen mouse events
|
|
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;
|
|
}</code></pre>
|
|
|
|
<h4>JS Way</h4>
|
|
<pre><code class="language-markup"><body>
|
|
<div class="your-element"></div>
|
|
|
|
<script type="text/javascript" src="vanilla-tilt.js"></script>
|
|
<script type="text/javascript">
|
|
VanillaTilt.init(document.querySelector(".your-element"), {
|
|
max: 25,
|
|
speed: 400
|
|
});
|
|
|
|
//It also supports NodeList
|
|
VanillaTilt.init(document.querySelectorAll(".your-element"));
|
|
</script>
|
|
</body></code></pre>
|
|
</div>
|
|
|
|
</section>
|
|
|
|
<section class="example">
|
|
<div class="box" data-tilt></div>
|
|
<div class="info">
|
|
<h3>The most basic usage:</h3>
|
|
<ol>
|
|
<li>Add
|
|
<pre class="inline"><code class="language-markup"><script src="vanilla-tilt.js"></script></code></pre>
|
|
right before the closing
|
|
<pre class="inline"><code class="language-markup"></body></code></pre>
|
|
tag
|
|
</li>
|
|
<li>Mark your elements with
|
|
<pre class="inline"><code class="language-markup"><div data-tilt></div></code></pre>
|
|
</li>
|
|
</ol>
|
|
</div>
|
|
</section>
|
|
<section class="example">
|
|
<div class="box" data-tilt>
|
|
<div class="inner"></div>
|
|
</div>
|
|
<div class="info">
|
|
<h3>Creating a parallax effect</h3>
|
|
<ol>
|
|
<li>
|
|
Add
|
|
<pre class="inline"><code class="language-css">transform-style: preserve-3d</code></pre>
|
|
to your tilt element.
|
|
</li>
|
|
<li>
|
|
Add
|
|
<pre class="inline"><code class="language-css">transform: perspective(1000px);</code></pre>
|
|
to your tilt element. (1000px is default perspective, but can be changed)
|
|
</li>
|
|
<li>
|
|
Add a
|
|
<pre class="inline"><code class="language-css">transform: translateZ(20px)</code></pre>
|
|
to your inner elements that have to pop out.
|
|
</li>
|
|
</ol>
|
|
</div>
|
|
</section>
|
|
<section class="example">
|
|
<div class="box" data-tilt data-tilt-glare data-tilt-max-glare="0.8"></div>
|
|
<div class="info">
|
|
<h3>Glare effect</h3>
|
|
<p>Setting this option will enable a glare effect. You can tweak the glare value with
|
|
<pre class="inline"><code class="language-markup">data-tilt-max-glare</code></pre>
|
|
</p>
|
|
<pre><code class="language-markup"><div data-tilt data-tilt-glare data-tilt-max-glare="0.8"></div></code></pre>
|
|
</div>
|
|
</section>
|
|
<section class="example">
|
|
<div class="box" data-tilt data-tilt-reverse="true"></div>
|
|
<div class="info">
|
|
<h3>Reverse tilt</h3>
|
|
<p>Setting this option will reverse the tilt.</p>
|
|
<pre><code class="language-markup"><div data-tilt data-tilt-reverse="true"></div></code></pre>
|
|
</div>
|
|
</section>
|
|
<section class="example">
|
|
<div class="box" data-tilt data-tilt-reset="false"></div>
|
|
<div class="info">
|
|
<h3>Keep floating</h3>
|
|
<p>Setting this option will not reset the tilt element when the user mouse leaves the element.</p>
|
|
<pre><code class="language-markup"><div data-tilt data-tilt-reset="false"></div></code></pre>
|
|
</div>
|
|
</section>
|
|
<section class="example">
|
|
<div class="box" data-tilt data-tilt-full-page-listening></div>
|
|
<div class="info">
|
|
<h3>Full page listening</h3>
|
|
<p>Setting this option will make the element respond to any mouse movements on page.</p>
|
|
<pre><code
|
|
class="language-markup"><div data-tilt data-tilt-full-page-listening></div></code></pre>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="example">
|
|
<div class="box" data-tilt data-tilt-scale="1.1"></div>
|
|
<div class="info">
|
|
<h3>Scale on hover</h3>
|
|
<p>Setting this option will scale tilt element on hover.</p>
|
|
<pre><code class="language-markup"><div data-tilt data-tilt-scale="1.1"></div></code></pre>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="example">
|
|
<div class="box" data-tilt data-tilt-startX="-25" data-tilt-startY="-25" data-tilt-max="25"></div>
|
|
<div class="info">
|
|
<h3>Start tilt position</h3>
|
|
<p>Setting this option will tilt the element at specific degrees at page load.</p>
|
|
<pre><code class="language-markup"><div data-tilt data-tilt-startX="20" data-tilt-startY="-20" data-tilt-reset-to-start="true"></div></code></pre>
|
|
<p><code class="language-markup">"reset-to-start"</code> - on mouse leave will reset the position to [startX, startY]</p>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="example">
|
|
<div class="box" data-tilt data-tilt-axis="y"></div>
|
|
<div class="info">
|
|
<h3>Disable X axis</h3>
|
|
<p>Setting this option will disable the X-Axis on the tilt element.</p>
|
|
<pre><code class="language-markup"><div data-tilt data-tilt-axis="y"></div></code></pre>
|
|
</div>
|
|
</section>
|
|
<section class="example">
|
|
<div class="box" data-tilt data-tilt-axis="x"></div>
|
|
<div class="info">
|
|
<h3>Disable Y axis</h3>
|
|
<p>Setting this option will disable the Y-Axis on the tilt element.</p>
|
|
<pre><code class="language-markup"><div data-tilt data-tilt-axis="x"></div></code></pre>
|
|
</div>
|
|
</section>
|
|
<section class="example">
|
|
<div class="box" id="destroy-box"></div>
|
|
<div class="info">
|
|
<h3>Destroy method</h3>
|
|
<p>Call this method will remove all events and classes from the tilt element.</p>
|
|
<pre><code class="language-javascript">let destroyBox = document.querySelector("#destroy-box");
|
|
VanillaTilt.init(destroyBox);
|
|
|
|
document.querySelector("#destroy-button").addEventListener("click", function () {
|
|
destroyBox.vanillaTilt.destroy();
|
|
});
|
|
|
|
document.querySelector("#enable-button").addEventListener("click", function () {
|
|
VanillaTilt.init(destroyBox);
|
|
});</code></pre>
|
|
<button id="destroy-button">Destroy</button>
|
|
<button id="enable-button">Enable</button>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="example">
|
|
<div class="box" id="box-event"></div>
|
|
<div class="info">
|
|
<h3>Tilt change event</h3>
|
|
<p>The tilt change event will output the x,y & percentages of tilting.</p>
|
|
<pre><code class="language-javascript">let eventBox = document.querySelector("#box-event");
|
|
let outputContainer = document.querySelector(".output");
|
|
VanillaTilt.init(eventBox);
|
|
|
|
|
|
eventBox.addEventListener("tiltChange", function (event) {
|
|
let li = document.createElement("li");
|
|
li.textContent = JSON.stringify(event.detail);
|
|
outputContainer.insertBefore(li, outputContainer.firstChild);
|
|
});</code></pre>
|
|
<ul class="output"></ul>
|
|
</div>
|
|
</section>
|
|
<section class="example mobileCredits">
|
|
<div class="box" id="box-event" style="background:transparent;">
|
|
<a href="http://gijsroge.github.io/tilt.js/" class="logo" id="logoJquery" data-tilt="" data-tilt-speed="400"
|
|
data-tilt-scale="1.1" data-tilt-max="10" data-tilt-perspective="500"
|
|
style="will-change: transform; transform: perspective(500px) rotateX(0deg) rotateY(0deg) scale3d(1, 1, 1);">
|
|
<span>tilt.js</span>
|
|
</a>
|
|
</div>
|
|
<div class="info">
|
|
<h3>jQuery Version</h3>
|
|
<p>vanilla-tilt.js is a fork of the original <a class="link" href="https://github.com/gijsroge/tilt.js"
|
|
target="_blank">tilt.js jQuery version</a> by <a
|
|
class="link" href="https://github.com/gijsroge" target="_blank">Gijs Rogé</a>.</p>
|
|
</div>
|
|
<div class="info">
|
|
<h3>Contributors</h3>
|
|
<ul>
|
|
<li>
|
|
<a href="https://github.com/BrunnerLivio">Livio Brunner</a>
|
|
</li>
|
|
<li>
|
|
<a href="https://github.com/Dok11">Oleg Postoev</a>
|
|
</li>
|
|
<li>
|
|
<a href="https://github.com/matteo-rigon">Matteo Rigon</a>
|
|
</li>
|
|
<li>
|
|
<a href="https://github.com/lazyhummingbird">Corey Austin</a>
|
|
</li>
|
|
<li>
|
|
<a href="https://github.com/SaFrMo">Sander Moolin</a>
|
|
</li>
|
|
<li>
|
|
<a href="https://github.com/rrroyal">rrroyal</a>
|
|
</li>
|
|
<li>
|
|
<a href="https://github.com/Pilskalns">Andžs Pilskalns</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="info">
|
|
<h3>Other projects</h3>
|
|
<a style="margin:15px 0;" href="https://play.google.com/store/apps/details?id=com.quickcursor" title="Quick Cursor Android app" target="_blank" id="quickcursor" data-tilt
|
|
data-tilt-glare="true" data-tilt-max-glare="0.8" data-tilt-speed="400" data-tilt-scale="1.1" data-tilt-max="10"
|
|
data-tilt-perspective="500">
|
|
<div id="quickcursor-logo"></div>
|
|
</a>
|
|
<h6 style="margin-top:10px;">One-Handed mode for Android</h6>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<script type="text/javascript" src="src/vanilla-tilt.min.js"></script>
|
|
<script>
|
|
let destroyBox = document.querySelector("#destroy-box");
|
|
VanillaTilt.init(destroyBox);
|
|
|
|
document.querySelector("#destroy-button").addEventListener("click", function () {
|
|
destroyBox.vanillaTilt.destroy();
|
|
});
|
|
|
|
document.querySelector("#enable-button").addEventListener("click", function () {
|
|
VanillaTilt.init(destroyBox);
|
|
});
|
|
</script>
|
|
<script>
|
|
let eventBox = document.querySelector("#box-event");
|
|
let outputContainer = document.querySelector(".output");
|
|
VanillaTilt.init(eventBox);
|
|
|
|
|
|
eventBox.addEventListener("tiltChange", function (event) {
|
|
let li = document.createElement("li");
|
|
li.textContent = JSON.stringify(event.detail);
|
|
outputContainer.insertBefore(li, outputContainer.firstChild);
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|