-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
112 lines (105 loc) · 3.72 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>tilted.js</title>
<script src="https://use.fontawesome.com/982f9b7898.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="./demo/styles/zenburn.css">
<script src="./demo/highlight.pack.js"></script>
<script type="text/javascript">
hljs.initHighlightingOnLoad();
</script>
<script src="dist/tilted.js"></script>
</head>
<body>
<div id="splash">
<div class="centerView">
<div id="header">tilted.js</div>
</div>
<div>
<span id="moreInfoButton" onclick="goto('#desc')">
<span>Scroll down for more Info</span><br>
<i class="fa fa-chevron-circle-down" aria-hidden="true"></i>
</span>
</div>
</div>
<div id="desc">
<hr>
<h1>Installation</h1>
<h2>NPM</h2>
<div class="prop">npm install tilted.js</div>
<h3>or</h3>
<h2>CDN</h2>
<div class="prop"><script src="https://cdn.jsdelivr.net/npm/tilted.js/dist/tilted.js"></script></div>
<hr>
<h1>Instructions</h1>
<div>
<div class="sideByside">
<p>Add your <b class="spaced">HTML</b> element</p>
<pre class="code"><code class="html"><div id='thisIsaID' >this element will be tilted</div></code></pre>
</div>
<div class="sideByside">
<p>Add your <b class="spaced">CSS</b> </p>
<pre class="code"><code class="css">#thisIsaID {
background-color: #212121;
border-radius: 10px;
padding: 50px;
display: inline-block;
}</code></pre>
</div>
</div>
<br>
<p>Run the function <b class="spaced">tilted()</b> with the parameters of (<i><span class="spaced">id of element</span></i>, <i><span class="spaced">properties</span></i>)</p>
<pre class="code"><code class="js">tilted('thisIsaID', {
intensity: 15,
onHover: true,
disableX: false,
disableY: false,
invert: false
});</code></pre>
<h3 style="margin: 5px 0px">Code from above, in Action:</h2>
<div id='thisIsaID' style="background-color: #212121; border-radius: 10px; padding: 50px; display: inline-block">this element will be tilted</div>
<div id="properties">
<h1>Properties</h1>
<div class="prop-noBack">intensity: controls the intensity (default: 12)</div>
<div class="prop-noBack">onHover: controls if tilt happens only on hover (default: false)</div>
<div class="prop-noBack">disableX: enables/disables tilt on the X axis (default: false)</div>
<div class="prop-noBack">disableY: enables/disables tilt on the Y axis (default: false)</div>
<div class="prop-noBack">invert: tilt will be inverted (default: false)</div>
</div>
</div>
<div id="footer">
<div id="fork">
<a class="nostyle" href="https://github.com/PashanIrani/tilted.js">Download from Github: <i class="fa fa-github" aria-hidden="true"></i></a>
</div>
</div>
<!--script src="dist/tilted.js"></script-->
<script src="dist/main.js"></script>
<script>
tilted('header');
tilted('fork', {
intensity: 10,
onHover: true
});
tilted('thisIsaID', {
intensity: 15,
onHover: true,
disableX: false,
disableY: false,
invert: false
});
</script>
<script>
/* * Will goto the top of an element, with a smooth scroll animation */
function goto(el, callback) {
if (el == null || el == undefined) return;
$('html,body').animate({
scrollTop: $(el).offset().top
}, 800);
if (callback != null && callback != undefined)
callback();
}
</script>
</body>
</html>