deblan-mirror/vanilla-tilt.js
deblan-mirror/vanilla-tilt.js
1
0
Fork 0
mirror of https://github.com/micku7zu/vanilla-tilt.js synced 2024-06-28 01:50:02 +02:00
Code Issues Projects Releases Wiki Activity

Fix github project page.

Browse source
This commit is contained in:
micku7zu 2017-01-28 11:39:32 +02:00
parent 7fa8e733f0
commit 9c691a70e6
3 changed files with 3051 additions and 3049 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3051
index.html Normal file
View file

File diff suppressed because it is too large Load diff

202
landing/landing.html
View file

@ -1,202 +0,0 @@
<!-- copyright http://gijsroge.github.io/tilt.js/ -->
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vanillaTilt.js</title>
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,600,700" rel="stylesheet">
<link rel="stylesheet" href="main.css">
<link href="https://fonts.googleapis.com/css?family=Fira+Sans+Extra+Condensed" rel="stylesheet">
<meta name="description"
content="vanillaTilt.js, a small easy to use 60+fps requestAnimationFrame powered parallax tilt effect without any dependencies inspired by Tilt.js. ">
</head>
<body class="u-flex-set">
<aside>
<a href="/vanillaTilt.js" class="c-logo js-tilt" data-tilt-speed="400" data-tilt-scale="1.1" data-tilt-maxtilt="50"
data-tilt-perspective="500">
<span class="backdrop"></span>
<span>vanillaTilt.js</span>
</a>
</aside>
<main>
<header>
<p class="u-font-huge">
All credits goes to <strong><a href="http://gijsroge.github.io/">Gijs Rogé</a></strong>, he made the Tilt.js library based on jQuery.
</p>
<p class="u-font-huge">
vanillaTils.js is Tilt.js but without jQuery dependency. Everything else is copied from Tilt.js!
</p>
<p class="u-font-large">
Inspired, copied, forked, rewritten from <a href="http://gijsroge.github.io/tilt.js/">http://gijsroge.github.io/tilt.js/</a>
</p>
<p class="u-font-large">A tiny requestAnimationFrame powered <strong>60+fps</strong><br>
lightweight parallax tilt effect. </p>
<strong>Notices:</strong>
<ul>
<li>No Javascript dependencies</li>
<li>No CSS is needed</li>
<li><a href="https://github.com/micku7zu/vanillaTilt.js"
title="Extra documentation about vanillaTilt.js plugin">Documentation</a></li>
</ul>
</header>
<article class="[ c-example ]">
<div class="[ c-example__demo ]">
<div class="[ c-example__tilt ] js-tilt" data-tilt-perspective="250" data-tilt-speed="1000"
data-tilt-max="50"></div>
</div>
<div class="c-example__info">
<h3>The most basic usage:</h3>
<ol>
<li>Add <code class="language-html">&lt;script src=&quot;vanillaTilt.js&quot;&gt;&lt;/script&gt;</code>
right before the closing <code class="language-html">&lt;/body&gt;</code> tag
</li>
<li>Mark your elements with <code class="language-html">&lt;span data-tilt&gt;&lt;/span&gt;</code>
</li>
</ol>
</div>
</article>
<article class="[ c-example ]">
<div class="[ c-example__demo ]">
<div class="[ c-example__tilt ] js-tilt" data-tilt-reset="false" data-tilt-speed="1000" data-tilt-max="50"
data-tilt-perspective="250"></div>
</div>
<div class="c-example__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-javascript">VanillaTilt.init(document.querySelector("your-element"), {
reset: false
})</code></pre>
</div>
</article>
<article class="[ c-example ]">
<div class="[ c-example__demo ]">
<div class="[ c-example__tilt ] js-tilt" data-tilt-speed="1000" data-tilt-max="20" data-tilt-scale="1.2"
data-tilt-perspective="250"></div>
</div>
<div class="c-example__info">
<h3>Scale on hover</h3>
<p>Setting this option will scale tilt element on hover.</p>
<pre><code class="language-javascript">VanillaTilt.init(document.querySelector("your-element"), {
scale: 1.2
})</code></pre>
</div>
</article>
<article class="[ c-example ]">
<div class="[ c-example__demo ]">
<div class="[ c-example__tilt ] js-tilt" data-tilt-speed="250" data-tilt-max="50" data-tilt-axis="x"
data-tilt-perspective="250"></div>
</div>
<div class="c-example__info">
<h3>Disable Y axis</h3>
<p>Setting this option will disable the Y-Axis on the tilt element.</p>
<pre><code class="language-javascript">VanillaTilt.init(document.querySelector("your-element"), {
axis: x
})</code></pre>
</div>
</article>
<article class="[ c-example ]">
<div class="[ c-example__demo ]">
<div class="[ c-example__tilt ] js-tilt" data-tilt-speed="250" data-tilt-max="50" data-tilt-axis="y"
data-tilt-perspective="250"></div>
</div>
<div class="c-example__info">
<h3>Disable X axis</h3>
<p>Setting this option will disable the X-Axis on the tilt element.</p>
<pre><code class="language-javascript">VanillaTilt.init(document.querySelector("your-element"), {
axis: y
})</code></pre>
</div>
</article>
<article class="[ c-example ] js-parent">
<div class="[ c-example__demo ]">
<div class="[ c-example__tilt ] js-tilt js-tilt-destroy" data-tilt-speed="250" data-tilt-reset="false"
data-tilt-max="50"
data-tilt-perspective="250"></div>
</div>
<div class="c-example__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">var element = document.querySelector("your-element");
VanillaTilt.init(element);
element.vanillaTilt.destroy();
</code></pre>
<button class="js-destroy c-button">Destroy</button>
<button class="js-enable c-button">Re-enable</button>
</div>
</article>
<article class="[ c-example ] js-parent">
<div class="[ c-example__demo ]">
<div class="[ c-example__tilt ] js-tilt-output" data-tilt-speed="250" data-tilt-max="50"
data-tilt-perspective="250"></div>
</div>
<div class="c-example__info">
<h3>On change event</h3>
<p>The on change event wil output the x,y & percentages of tilting.</p>
<pre><code class="language-javascript">var element = document.querySelector("your-element");
VanillaTilt.init(element);
element.addEventListener("tiltChange", function(event){ console.log(event.detail); });
</code></pre>
<ul class="c-example__output js-output u-font-tiny"></ul>
</div>
</article>
<article class="[ c-example ]">
<div>
<h3>Features</h3>
<ul>
<li>
<p>Options can be passed with the<code class="language-js">tilt()</code>function.</p>
<pre>
<code class="language-js">VanillaTilt.init(document.querySelector("your-element"), {
option: value,
option: value,
});</code></pre>
</li>
<li>
<p>
All options are configurable trough data-attributes.
<code class="language-html">data-tilt-&lt;option name&gt;=&quot;value&quot;</code>
</p>
</li>
</ul>
</div>
</article>
</main>
<script src="../dest/vanillaTilt.js"></script>
<script>
var elements = document.querySelectorAll(".js-tilt");
var tiltOutput = document.querySelector(".js-tilt-output");
var output = document.querySelector(".js-output");
VanillaTilt.init(elements);
VanillaTilt.init(tiltOutput);
tiltOutput.addEventListener("tiltChange", function (event) {
console.log("TEST");
var li = document.createElement("li");
li.textContent = JSON.stringify(event.detail);
output.insertBefore(li, output.firstChild);
});
document.querySelector(".js-destroy").addEventListener("click", function () {
document.querySelector(".js-tilt-destroy").vanillaTilt.destroy();
});
document.querySelector(".js-enable").addEventListener("click", function () {
VanillaTilt.init(document.querySelector(".js-tilt-destroy"));
});
</script>
</body>
</html>

2847
landing/main.css
View file

File diff suppressed because it is too large Load diff