UNPKG

17.7 kBHTMLView Raw
1<!DOCTYPE html>
2<html lang="en">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1">
6 <meta http-equiv="X-UA-Compatible" content="IE=edge">
7 <meta name="msapplication-tap-highlight" content="no">
8 <meta name="description" content="Materialize is a modern responsive CSS framework based on Material Design by Google. ">
9 <title>ScrollFire - Materialize</title>
10 <!-- Favicons-->
11 <link rel="apple-touch-icon-precomposed" href="images/favicon/apple-touch-icon-152x152.png">
12 <meta name="msapplication-TileColor" content="#FFFFFF">
13 <meta name="msapplication-TileImage" content="images/favicon/mstile-144x144.png">
14 <link rel="icon" href="images/favicon/favicon-32x32.png" sizes="32x32">
15 <!-- Android 5 Chrome Color-->
16 <meta name="theme-color" content="#EE6E73">
17 <!-- CSS-->
18 <link href="css/prism.css" rel="stylesheet">
19 <link href="css/ghpages-materialize.css" type="text/css" rel="stylesheet" media="screen,projection">
20 <link href="http://fonts.googleapis.com/css?family=Inconsolata" rel="stylesheet" type="text/css">
21 <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
22 <script>
23 window.liveSettings = {
24 api_key: "a0b49b34b93844c38eaee15690d86413",
25 picker: "bottom-right",
26 detectlang: true,
27 dynamic: true,
28 autocollect: true
29 };
30 </script>
31 <script src="//cdn.transifex.com/live.js"></script>
32 </head>
33 <body>
34 <header>
35 <nav class="top-nav">
36 <div class="container">
37 <div class="nav-wrapper"><a class="page-title">ScrollFire</a></div>
38 </div>
39 </nav>
40 <div class="container"><a href="#" data-activates="nav-mobile" class="button-collapse top-nav full hide-on-large-only"><i class="material-icons">menu</i></a></div>
41 <ul id="nav-mobile" class="side-nav fixed">
42 <li class="logo"><a id="logo-container" href="http://materializecss.com/" class="brand-logo">
43 <object id="front-page-logo" type="image/svg+xml" data="res/materialize.svg">Your browser does not support SVG</object></a></li>
44 <li class="search">
45 <div class="search-wrapper card">
46 <input id="search"><i class="material-icons">search</i>
47 <div class="search-results"></div>
48 </div>
49 </li>
50 <li class="bold"><a href="about.html" class="waves-effect waves-teal">About</a></li>
51 <li class="bold"><a href="getting-started.html" class="waves-effect waves-teal">Getting Started</a></li>
52 <li class="no-padding">
53 <ul class="collapsible collapsible-accordion">
54 <li class="bold"><a class="collapsible-header waves-effect waves-teal">CSS</a>
55 <div class="collapsible-body">
56 <ul>
57 <li><a href="color.html">Color</a></li>
58 <li><a href="grid.html">Grid</a></li>
59 <li><a href="helpers.html">Helpers</a></li>
60 <li><a href="media-css.html">Media</a></li>
61 <li><a href="sass.html">Sass</a></li>
62 <li><a href="shadow.html">Shadow</a></li>
63 <li><a href="table.html">Table</a></li>
64 <li><a href="css-transitions.html">Transitions</a></li>
65 <li><a href="typography.html">Typography</a></li>
66 </ul>
67 </div>
68 </li>
69 <li class="bold"><a class="collapsible-header waves-effect waves-teal">Components</a>
70 <div class="collapsible-body">
71 <ul>
72 <li><a href="badges.html">Badges</a></li>
73 <li><a href="buttons.html">Buttons</a></li>
74 <li><a href="breadcrumbs.html">Breadcrumbs</a></li>
75 <li><a href="cards.html">Cards</a></li>
76 <li><a href="chips.html">Chips</a></li>
77 <li><a href="collections.html">Collections</a></li>
78 <li><a href="footer.html">Footer</a></li>
79 <li><a href="forms.html">Forms</a></li>
80 <li><a href="icons.html">Icons</a></li>
81 <li><a href="navbar.html">Navbar</a></li>
82 <li><a href="pagination.html">Pagination</a></li>
83 <li><a href="preloader.html">Preloader</a></li>
84 </ul>
85 </div>
86 </li>
87 <li class="bold"><a class="collapsible-header active waves-effect waves-teal">JavaScript</a>
88 <div class="collapsible-body">
89 <ul>
90 <li><a href="carousel.html">Carousel</a></li>
91 <li><a href="collapsible.html">Collapsible</a></li>
92 <li><a href="dialogs.html">Dialogs</a></li>
93 <li><a href="dropdown.html">Dropdown</a></li>
94 <li><a href="media.html">Media</a></li>
95 <li><a href="modals.html">Modals</a></li>
96 <li><a href="parallax.html">Parallax</a></li>
97 <li><a href="pushpin.html">Pushpin</a></li>
98 <li class="active"><a href="scrollfire.html">ScrollFire</a></li>
99 <li><a href="scrollspy.html">Scrollspy</a></li>
100 <li><a href="side-nav.html">SideNav</a></li>
101 <li><a href="tabs.html">Tabs</a></li>
102 <li><a href="transitions.html">Transitions</a></li>
103 <li><a href="waves.html">Waves</a></li>
104 </ul>
105 </div>
106 </li>
107 </ul>
108 </li>
109 <li class="bold"><a href="http://materializecss.com/mobile.html" class="waves-effect waves-teal">Mobile</a></li>
110 <li class="bold"><a href="showcase.html" class="waves-effect waves-teal">Showcase</a></li>
111 </ul>
112 </header>
113 <main><div class="container">
114 <div class="row">
115
116 <div class="col s12 m9 l10">
117
118 <div id="introduction" class="section scrollspy">
119 <h4>Introduction</h4>
120 <p class="caption">ScrollFire is a jQuery Plugin that executes callback functions depending on how far into the page you've scrolled. We'll show you how you can use this plugin with many demos and examples.</p>
121 </div>
122
123
124 <div id="initialization" class="section scrollspy">
125 <h4>jQuery Plugin Initialization</h4>
126 <pre><code class="language-javascript col s12">
127 var options = [
128 {selector: '.class', offset: 200, callback: customCallbackFunc } },
129 {selector: '.other-class', offset: 200, callback: function() {
130 customCallbackFunc();
131 } },
132 ];
133 Materialize.scrollFire(options);
134 </code></pre>
135 </div>
136
137 <div id="options" class="section scrollspy">
138 <h4>jQuery Plugin Options</h4>
139 <table class="highlight">
140 <thead>
141 <tr>
142 <th>Option Name</th>
143 <th>Description</th>
144 </tr>
145 </thead>
146
147 <tbody>
148 <tr>
149 <td>selector</td>
150 <td>The selector for the element that is being tracked.</td>
151 </tr>
152 <tr>
153 <td>offset</td>
154 <td>If this is 0, the callback will be fired when the selector element is at the very bottom of the user's window.</td>
155 </tr>
156 <tr>
157 <td>callback</td>
158 <td>Execute a callback function when the user scrolls to the threshold. It will only be called once. <br /> The callback provides a parameter which refers to the current element selected.</td>
159 </tr>
160 </tbody>
161 </table>
162
163 <!-- Demo -->
164 <h2 class="header">ScrollFire Demo</h2>
165 <p>Scroll through slowly to get sense of what ScrollFire can do for you. This is the ScrollFire code that we have used on this page.</p>
166 <pre>
167 <code class="language-javascript">
168 var options = [</code>
169 <code id="call-1" class="language-javascript">{selector: '#staggered-test', offset: 50, callback: function(el) {
170 Materialize.toast("This is our ScrollFire Demo!", 1500 );
171 } },</code>
172 <code id="call-2" class="language-javascript">{selector: '#staggered-test', offset: 205, callback: function(el) {
173 Materialize.toast("Please continue scrolling!", 1500 );
174 } },</code>
175 <code id="call-3" class="language-javascript">{selector: '#staggered-test', offset: 400, callback: function(el) {
176 Materialize.showStaggeredList($(el));
177 } },</code>
178 <code id="call-4" class="language-javascript">{selector: '#image-test', offset: 500, callback: function(el) {
179 Materialize.fadeInImage($(el));
180 } }</code>
181 ];
182 Materialize.scrollFire(options);
183 </code></pre>
184 <ul id="staggered-test">
185 <li>
186 <h4><a href="#">List Item</a></h4>
187 <p>This is a description</p>
188 </li>
189 <li>
190 <h4><a href="#">List Item</a></h4>
191 <p>This is a description</p>
192 </li>
193 <li>
194 <h4><a href="#">List Item</a></h4>
195 <p>This is a description</p>
196 </li>
197 <li>
198 <h4><a href="#">List Item</a></h4>
199 <p>This is a description</p>
200 </li>
201 <li>
202 <h4><a href="#">List Item</a></h4>
203 <p>This is a description</p>
204 </li>
205 </ul>
206
207 <img id="image-test" class="responsive-img" src="https://unsplash.imgix.net/reserve/nE6neNVdRPSIasnmePZe_IMG_1950.jpg?dpr=1.25&fit=crop&fm=jpg&h=700&q=75&w=1050">
208 </div>
209
210
211
212 </div>
213
214 <div class="col hide-on-small-only m3 l2">
215 <div class="toc-wrapper">
216 <div class="buysellads hide-on-small-only">
217 <!-- CarbonAds Zone Code -->
218 <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=materializecss" id="_carbonads_js"></script>
219 </div>
220 <div style="height: 1px;">
221 <ul class="section table-of-contents">
222 <li><a href="#introduction">Introduction</a></li>
223 <li><a href="#initialization">Initialization</a></li>
224 <li><a href="#options">Options</a></li>
225 </ul>
226 </div>
227 </div>
228 </div>
229
230 </div>
231</div>
232
233<script>
234
235</script>
236
237
238 </main> <footer class="page-footer">
239 <div class="container">
240 <div class="row">
241 <div class="col l4 s12">
242 <h5 class="white-text">Help Materialize Grow</h5>
243 <p class="grey-text text-lighten-4">We are a team of college students working on this project like it's our full time job. Any amount would help support and continue development on this project and is greatly appreciated.</p>
244 <form id="paypal-donate" action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
245<input type="hidden" name="cmd" value="_s-xclick">
246<input type="hidden" name="encrypted" value="-----BEGIN PKCS7-----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-----END PKCS7-----
247">
248<button class="btn waves-effect waves-light red lighten-3" type="submit" name="action" alt="PayPal - The safer, easier way to pay online!">Donate Now
249</button>
250</form>
251
252 </div>
253 <div class="col l4 s12">
254 <h5 class="white-text">Join the Discussion</h5>
255 <p class="grey-text text-lighten-4">We have a Gitter chat room set up where you can talk directly with us. Come in and discuss new features, future goals, general problems or questions, or anything else you can think of.</p>
256 <a class="btn waves-effect waves-light red lighten-3" target="_blank" href="https://gitter.im/Dogfalo/materialize">Chat</a>
257 </div>
258 <div class="col l4 s12" style="overflow: hidden;">
259 <h5 class="white-text">Connect</h5>
260 <iframe src="http://ghbtns.com/github-btn.html?user=dogfalo&repo=materialize&type=watch&count=true&size=large" allowtransparency="true" frameborder="0" scrolling="0" width="170" height="30"></iframe>
261 <br>
262 <a href="https://twitter.com/MaterializeCSS" class="twitter-follow-button" data-show-count="true" data-size="large" data-dnt="true">Follow @MaterializeCSS</a>
263 <br>
264 <div class="g-follow" data-annotation="bubble" data-height="24" data-href="https://plus.google.com/108619793845925798422" data-rel="publisher"></div>
265 </div>
266 </div>
267 </div>
268 <div class="footer-copyright">
269 <div class="container">
270 © 2014-2017 Materialize, All rights reserved.
271 <a class="grey-text text-lighten-4 right" href="https://github.com/Dogfalo/materialize/blob/master/LICENSE">MIT License</a>
272 </div>
273 </div>
274 </footer>
275
276 <!-- Scripts-->
277 <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
278 <script>if (!window.jQuery) { document.write('<script src="bin/jquery-2.1.1.min.js"><\/script>'); }
279 </script>
280 <script src="js/jquery.timeago.min.js"></script>
281 <script src="js/prism.js"></script>
282 <script src="jade/lunr.min.js"></script>
283 <script src="jade/search.js"></script>
284 <script src="bin/materialize.js"></script>
285 <script src="js/init.js"></script>
286 <!-- Twitter Button -->
287 <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
288
289 <!-- Google Plus Button-->
290 <script src="https://apis.google.com/js/platform.js" async defer></script>
291
292 <!-- Google Analytics -->
293 <script>
294 (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
295 (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
296 m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
297 })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
298
299 ga('create', 'UA-56218128-1', 'auto');
300 ga('require', 'displayfeatures');
301 ga('send', 'pageview');
302 </script>
303
304 <script type="text/javascript">
305 var options = [
306 {selector: '#staggered-test', offset: 50, callback: function(el) {
307 Materialize.toast("This is our ScrollFire Demo!", 1500);
308 $("#call-1").velocity({ backgroundColor: "#333", color: "#ef5350" }, {duration: 500});
309 } },
310 {selector: '#staggered-test', offset: 205, callback: function(el) {
311 Materialize.toast("Please continue scrolling!", 1500);
312 $("#call-2").velocity({ backgroundColor: "#333", color: "#ef5350" }, {duration: 500});
313 } },
314 {selector: '#staggered-test', offset: 500, callback: function(el) {
315 Materialize.showStaggeredList($(el));
316 $("#call-3").velocity({ backgroundColor: "#333", color: "#ef5350" }, {duration: 500});
317 } },
318 {selector: '#image-test', offset: 500, callback: function(el) {
319 Materialize.fadeInImage($(el));
320 $("#call-4").velocity({ backgroundColor: "#333", color: "#ef5350" }, {duration: 500});
321 } }
322 ];
323 Materialize.scrollFire(options);
324 </script>
325 </body>
326</html>
\No newline at end of file