This repository has been archived by the owner on May 27, 2024. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 59
/
index.html
executable file
·117 lines (109 loc) · 5.03 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
113
114
115
116
117
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Rocket Flicker Module</title>
<link href="node_modules/rocket-demo/css/demo.min.css" type="text/css" rel="stylesheet">
<link href="css/flicker.min.css" type="text/css" rel="stylesheet">
</head>
<body>
<div id="rocket-demo-message">
You need to run "npm install" and include the neccessary demo files in order to view this file.
</div>
<div id="rocket-demo" style="display:none;">
<div class="heading">
<div class="container"><h2>Rocket Flicker Module</h2></div>
</div>
<div class="container">
<h4>Getting Started</h4>
<p>Install via NPM.</p>
<pre class="prettyprint linenums">
npm install rocket-flicker
</pre>
<p class="note">Note that this module has a dependency <a href="https://github.com/chrishumboldt/Rocket-Tools" class="link" target="_blank">Rocket Tools (28kb)</a> which will automatically be installed as well.</p>
<p>Start by including the necessary files.</p>
<pre class="prettyprint linenums">
<head>
<link href="node_modules/rocket-flicker/css/flicker.min.css" rel="stylesheet" type="text/css">
</head>
<body>
/* Your content goes here */
<script src="node_modules/rocket-tools/js/tools.min.js"></script>
<script src="node_modules/rocket-flicker/js/flicker.min.js"></script>
</body>
</pre>
<br>
<h4>Basic Example</h4>
<p>See the setup of the HTML and Javascript call below.</p>
<pre class="prettyprint linenums">
<div class="mod-flicker">
<ul>
<li data-background="image-url.jpg">
<div class="mod-flicker-title">Example Heading</div>
<div class="mod-flicker-text">Sub Text</div>
</li>
<li data-background="image-url.jpg">
<div class="mod-flicker-title">Example Heading</div>
<div class="mod-flicker-text">Sub Text</div>
</li>
</ul>
</div>
<script>
Rocket.flicker();
</script>
</pre>
<p class="note">There are options that you can set. Read the more detailed documentation to find out more.</p>
<br>
<h4>Make It Touch Enabled</h4>
<p>To make your flicker touch enabled, just included the Hammer library (Rocket Flicker comes with a copy). For example.</p>
<pre class="prettyprint linenums">
<body>
/* Your content goes here */
<script src="node_modules/rocket-flicker/js/hammer-v2.0.3.min.js"></script>
<script src="node_modules/rocket-tools/js/tools.min.js"></script>
<script src="node_modules/rocket-flicker/js/flicker.min.js"></script>
</body>
</pre>
<br>
<h4>Working Example</h4>
<div class="mod-flicker">
<ul>
<li>
<div class="mod-flicker-title">Rocket Flicker Is Working</div>
<div class="mod-flicker-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
</li>
<li>
<div class="mod-flicker-title">Editable via Javascript or CSS</div>
<div class="mod-flicker-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
</li>
<li>
<div class="mod-flicker-title">Touch Enabled Through Hammer.js</div>
<div class="mod-flicker-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
</li>
</ul>
</div>
<br><br>
<h4>Detailed Documentation</h4>
<p>For a more detailed look into the available options, you can read the documentation at <a target="_blank" href="https://github.com/chrishumboldt/Rocket-Flicker" class="link">https://github.com/chrishumboldt/Rocket-Flicker</a></p>
</div>
<footer><div class="container"><div class="col-double">
<div class="left">
Made by <a href="http://chrishumboldt.com" target="_blank">Chris Humboldt</a>
</div>
<!-- <div class="right">
A <a href="http://getwebplate.com" target="_blank">Webplate Project</a>
Want updates? <a href="http://twitter.com/webplatetweets" target="_blank">@webplatetweets</a>
</div> -->
</div></div></footer>
</div>
<!-- Scripts -->
<script src="node_modules/rocket-tools/js/tools.min.js"></script>
<script src="node_modules/rocket-demo/js/demo.min.js"></script>
<script src="js/hammer-v2.0.3.min.js"></script>
<script src="js/flicker.min.js"></script>
<script>
Rocket.flicker();
</script>
</body>
</html>