-
Notifications
You must be signed in to change notification settings - Fork 5
/
Copy pathindex.htm
153 lines (150 loc) · 9.36 KB
/
index.htm
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
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
<!DOCTYPE html>
<html>
<head>
<title>Scroll Zip jQuery plugin / Tinywall </title>
<script src="lib/jquery-1.10.2.min.js"></script>
<script src="jquery.scrollzip.js"></script>
<link rel="stylesheet" type="text/css" href="lib/animate.css">
<link href="lib/prism.css" rel="stylesheet" />
<script type="text/javascript">
$(document).ready(function(){
$(window).on("load scroll resize", function(){
$('.header').scrollzip({
showFunction : function() { $(this).css("visibility", "visible").addClass('animated bounceInDown'); },
});
$('.section1,.section3,.section5,.section7,.block-left').scrollzip({
showFunction : function() { $(this).css("visibility", "visible").addClass('animated bounceInLeft'); },
hideFunction : function() { $(this).css("visibility", "hidden").removeClass('animated'); },
showShift : 50,
hideShift :50,
});
$('.section2,.section4,.section6,.block-right').scrollzip({
showFunction : function() { $(this).css("visibility", "visible").addClass('animated bounceInRight'); },
hideFunction : function() { $(this).css("visibility", "hidden").removeClass('animated'); },
showShift : 50,
hideShift :50,
});
});
});
</script>
<style>
a{text-decoration: none;color: #3181CA;}
.subtitle{}
.header{text-align: center;visibility: hidden;}
.title{font-size:50px;}
.title,.description{}
body{background: #eeeeee;color: #333333;font-family: arial;font-size:14px;margin: 0;padding: 0;overflow-x:hidden;}
.container{width: 800px;margin: 50px auto;max-width:90%;}
.section{background: #ffffff;border: 1px solid #dddddd;margin-top: 50px;padding: 20px;visibility: hidden;}
#content,#content2{background:#ddd;height:200px;display:hidden;}
.t1{width:100px;height:100px;background:#ef8603;margin:20px;visibility:hidden;}
.highlight{font-weight:bold;}
.option-table tr{vertical-align:top;}
table.option-table{border-width: 1px;border-spacing: 0px;border-style: outset;border-color: #f7f7f7;border-collapse: separate;background-color: white;}
table.option-table th {border-width: 1px;padding: 5px;border-style: inset;border-color: #f7f7f7;background-color: white;}
table.option-table td {border-width: 1px;padding: 5px;border-style: inset;border-color: #f7f7f7;background-color: white;}
.footer{margin-top: 50px;margin-bottom: 50px;text-align: right;}
.share{margin-top: 20px;}
.clear{clear: both;}
</style>
</head>
<body>
<a href="https://github.com/tinywall/scrollzip"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png" alt="Fork me on GitHub"></a>
<div class='container'>
<div class='header'>
<h1 class='title'>ScrollZip</h1>
<div class='description'>jQuery plugin to trigger functions when element/content becomes visibile/hidden while scrolling</div>
<div class='share'>
<a href="https://twitter.com/share" class="twitter-share-button" data-via="tinywallinfo">Tweet</a>
<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>
<a href="https://twitter.com/tinywallinfo" class="twitter-follow-button" data-show-count="false">Follow @Tinywall</a>
<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>
<iframe src="http://ghbtns.com/github-btn.html?user=tinywall&repo=scrollzip&type=watch&count=true" height="30" width="118" frameborder="0" scrolling="0" style="width:118px; height: 21px;margin-left:25px;" allowTransparency="true"></iframe>
</div>
</div>
<div class='section section1'><h2 class='subtitle'>Intro</h2>
ScrollZip is a jQuery plugin that is used <span class='highlight'>to add some event/action/effect to the web elements when it is becoming visibile or hidden while scrolling</span> the web page.
This plugin doesn't actually add any action, It just finds whether the element is coming into or going out of the visible part of the browser viewport and triggers the function in the showFunction, hideFunction part accordingly.
</div>
<div class='section section2'><h2 class='subtitle'>Example Usage</h2>
<a href='http://github.com/tinywall/scrollzip' target='_blank'>Download</a> and include the <a href='http://jquery.com' target='_blank'>jQuery</a> library and the <a href='https://raw.github.com/tinywall/scrollzip/master/jquery.scrollzip.js' target='_blank'>ScrollZip</a> plugin in your web page.
<pre class=" language-markup"><code>
<script src="jquery-1.10.2.min.js"></script>
<script src="jquery.scrollzip.js"></script>
</code></pre>
Now write the function to be called for the elements like the below code,
<pre><code class=" language-javascript">
$(document).ready(function(){
$(window).on("load scroll resize", function(){
$('element').scrollzip({
showFunction : function() {
alert('Element has come into the view.');
},//optional
hideFunction : function() {
alert('Element has gone out of the view.');
},//optional
wholeVisible : false,//optional (default false)
showShift : 100,//optional (default 0)
hideShift : 100,//optional (default 0)
});
});
});
</code></pre>
</div>
<div class='section section3'><h2 class='subtitle'>Options</h2>
<table class="option-table" border='1'>
<tr>
<td>showFunction</td>
<td>This function is used to write some code to be executed when the given element is becoming visible to user when scrolling. i.e. coming into the visible part of the browser viewport.</td>
</tr>
<tr>
<td>hideFunction</td>
<td>Same like showFunction but for the event of the element going out of the visible part of the screen.</td>
</tr>
<tr>
<td>wholeVisible</td>
<td>By default, Even when the small part of the element enters/exists the visibile part, the respective function is being called. But if you make wholeVisible to true, When the whole part of the element comes into the visibil area only the function triggers.</td>
</tr>
<tr>
<td>showShift</td>
<td>To manually specify the distance after how much px it is into the screen, it should trigger the event. Nagative value to trigger the function for the distance before it is being displayed.</td>
</tr>
<tr>
<td>hideShift</td>
<td>Same like showShift but for hiding the element.</td>
</tr>
</table>
</div>
<div class='section section4'><h2 class='subtitle'>Beware</h2>
Yes, there is already some good old jQuery plugins there for the scenario. But whats wrong? Let this be yet another solution.
And by the way I am new to jQuery plugins. So beware, this may be a creepy unoptimised implementation?!.<br/>
But still it works!!.. Isn't that enough?
<br/><br/>Here in this demo, I am using the <a href='http://daneden.me/animate/' target='_blank'>Animate.css</a> by <a href='https://twitter.com/_dte' target='_blank'>@_dte</a> for the CSS3 animations.<br/><br/>
<div style='margin-top:10px;float:left;'>
By the way, I am <a href='http://www.arundavid.com/' target='_blank'>Arun David</a>.
</div>
<div style='margin-top:8px;float:left;'>
<a href="https://twitter.com/ArnDvd" class="twitter-follow-button" data-show-count="false">Follow @ArnDvd</a>
<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>
</div>
<div class='clear'></div>
</div>
<div class='section block-right'>HTML5</div>
<div class='section block-left'>CSS3</div>
<div class='section block-right'>JavaScript</div>
<div class='footer'>Copyright © Tinywall</div>
</div>
<script src="lib/prism.js"></script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-26136964-1']);
_gaq.push(['_setDomainName', '.tinywall.info']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</body>
</html>