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-09 09:12:13 +02:00
Code Issues Projects Releases Wiki Activity

Update to version 1.6.3. Refactored some code and fixed degrees calculation.

Browse source
This commit is contained in:
Sandor Sergiu 2019-04-13 10:35:32 +03:00
parent 17e7669c2f
commit 85f4d2cf82
3 changed files with 27 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
index.html
View file

@ -13,13 +13,13 @@
<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="20" data-tilt-perspective="500">
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="20" data-tilt-perspective="500">
data-tilt-scale="1.1" data-tilt-max="10" data-tilt-perspective="500">
<span>tilt.js</span>
</a>
<br>
@ -49,7 +49,7 @@
<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="20" data-tilt-perspective="500">
data-tilt-scale="1.1" data-tilt-max="10" data-tilt-perspective="500">
<span>vanilla-tilt.js</span>
</a>
<p>
@ -80,25 +80,25 @@
<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="40">
<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>~ 6kb</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="40">
<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>~ 3.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="40">
<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>~ 8.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="40">
<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>~ 4.5kb</span>
@ -120,6 +120,8 @@
<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
@ -242,6 +244,16 @@
<pre><code class="language-markup">&lt;div data-tilt data-tilt-scale="1.1"&gt;&lt;/div&gt;</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">&lt;div data-tilt data-tilt-startX="20" data-tilt-startY="-20"&gt;&lt;/div&gt;</code></pre>
</div>
</section>
<section class="example">
<div class="box" data-tilt data-tilt-axis="y"></div>
<div class="info">
@ -298,7 +310,7 @@ eventBox.addEventListener("tiltChange", function (event) {
</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="20" data-tilt-perspective="500" style="will-change: transform; transform: perspective(500px) rotateX(0deg) rotateY(0deg) scale3d(1, 1, 1);">
<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>

2
src/vanilla-tilt.min.js vendored
View file

File diff suppressed because one or more lines are too long

6
style.css
View file

@ -381,6 +381,12 @@ h4 {
background: linear-gradient(to left, #3a6073, #3a7bd5); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.example:nth-child(13) .box {
background: #833ab4; /* fallback for old browsers */
background: -webkit-linear-gradient(to left, #fcb045, #fd1d1d, #833ab4); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to left, #fcb045, #fd1d1d, #833ab4); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
button {
display: inline-block;
vertical-align: middle;