-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
192 lines (182 loc) · 10.9 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
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
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="description" content="An ultra light weight library that detects if an element is in viewport and lets you do some action to
it.">
<meta name="keywords" content="JavaScript,js ,element, in viewport, viewport, library, api">
<meta name="author" content="Islam Sayed">
<link rel="shortcut icon" href="img/logo.png" type="image/x-icon">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/animate.css">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/atom-one-dark.css">
<script src="js/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
<title>insideViewport.js | Detect if an element or elements is in viewport and call a function then.</title>
</head>
<body>
<div id="page-container">
<section id="nav-section">
<div id="logo">
<!-- <svg id="logo-img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 22"><defs><linearGradient gradientUnits="userSpaceOnUse" y2="-2.623" x2="0" y1="986.67" id="0"><stop stop-color="#ffce3b"/><stop offset="1" stop-color="#ffd762"/></linearGradient><linearGradient y2="-2.623" x2="0" y1="986.67" gradientUnits="userSpaceOnUse"><stop stop-color="#ffce3b"/><stop offset="1" stop-color="#fef4ab"/></linearGradient></defs><g transform="matrix(1.99997 0 0 1.99997-10.994-2071.68)" fill="#da4453"><rect y="1037.36" x="7" height="8" width="8" fill="#32c671" rx="4"/><path d="m123.86 12.966l-11.08-11.08c-1.52-1.521-3.368-2.281-5.54-2.281-2.173 0-4.02.76-5.541 2.281l-53.45 53.53-23.953-24.04c-1.521-1.521-3.368-2.281-5.54-2.281-2.173 0-4.02.76-5.541 2.281l-11.08 11.08c-1.521 1.521-2.281 3.368-2.281 5.541 0 2.172.76 4.02 2.281 5.54l29.493 29.493 11.08 11.08c1.52 1.521 3.367 2.281 5.54 2.281 2.172 0 4.02-.761 5.54-2.281l11.08-11.08 58.986-58.986c1.52-1.521 2.281-3.368 2.281-5.541.0001-2.172-.761-4.02-2.281-5.54" fill="#fff" transform="matrix(.0436 0 0 .0436 8.177 1039.72)" stroke="none" stroke-width="9.512"/></g></svg>
-->
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px" y="0px" width="485.213px" height="485.212px" viewBox="0 0 485.213 485.212" style="enable-background:new 0 0 485.213 485.212;"
xml:space="preserve" fill="#b5f0e8">
<g>
<path d="M242.606,0C159.005,0,90.978,68.027,90.978,151.628c0,37.584,17.119,71.966,33.703,105.191
c13.859,27.867,26.948,54.166,26.948,76.765c0,16.759,13.565,30.321,30.327,30.321h121.3c16.765,0,30.331-13.562,30.331-30.321
c0-23.724,13.231-50.139,27.271-78.062c16.409-32.699,33.379-66.52,33.379-103.894C394.235,68.027,326.208,0,242.606,0z
M303.255,333.584h-121.3c0-59.706-60.651-121.303-60.651-181.956c0-66.989,54.313-121.302,121.302-121.302
c66.991,0,121.302,54.313,121.302,121.302C363.908,212.282,303.255,271.988,303.255,333.584z M303.255,90.978
c0,10.424,25.595,156.369-60.648,151.628c0,30.324,0,60.651,0,60.651h-30.324c0,0,14.213-103.296,45.487-133.623
c-0.947-1.895-45.487,12.321-45.487,72.972C212.282,242.606,126.989,132.675,303.255,90.978z M303.255,409.396
c8.382,0,15.168,6.786,15.168,15.163c0,8.383-6.786,15.168-15.168,15.168c8.382,0,15.168,6.777,15.168,15.159
c0,8.377-6.786,15.163-15.168,15.163h-30.322c-7.163,9.535-18.388,15.163-30.326,15.163c-11.936,0-23.161-5.628-30.324-15.163
h-30.327c-8.379,0-15.161-6.786-15.161-15.163c0-8.382,6.781-15.159,15.161-15.159c-8.379,0-15.161-6.785-15.161-15.168
c0-8.377,6.781-15.163,15.161-15.163c-8.379,0-15.161-6.776-15.161-15.159c0-8.382,6.781-15.163,15.161-15.163h121.3
c8.382,0,15.168,6.781,15.168,15.163C318.423,402.62,311.637,409.396,303.255,409.396z" />
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>
<a href="#/">insideViewport.js</a>
</div>
<nav>
<ul id="nav-items">
<li>
<a href="#/" class="home-link active">Home</a>
</li>
<li>
<a href="#docs-section" class="docs-link">Docs</a>
</li>
<li>
<a href="https://github.com/Islam888/insideViewport.js" class="github-link" target="_blank">GitHub</a>
</li>
</ul>
</nav>
</section>
<section id="header-section" class="opaque backgd-img">
<header>
<h1>insideViewport.js</h1>
</header>
<p>An ultra light weight library that detects if an element is in viewport and lets you do some action to
it.</p>
<div class="btn-group">
<a href="#docs-section">Docs</a>
<a href="https://github.com/Islam888/insideViewport.js" target="_blank">GitHub</a>
</div>
</section>
<main>
<section id="why-section">
<h2 class="why">?Why Use it</h2>
<ol class="reasons">
<li class="reason"><span>1.</span><p>Ultra light weight (JUST 2.2KB).</p></li>
<li class="reason"><span>2.</span><p>Written in pure vanilla javascript.</p></li>
<li class="reason"><span>3.</span><p>Compatible with all browsers.</p></li>
<li class="reason"><span>4.</span><p>Compatible even with old browsers versions.</p></li>
<li class="reason"><span>5.</span><p>No special setup or npm package install.</p></li>
<li class="reason"><span>6.</span><p>Just copy and paste code at your JS file.</p></li>
</ol>
</section>
<section id="docs-section">
<h2 class="sides-padding">Docs</h2>
<h3>Just 3 super easy steps.</h3>
<div class="step">
<h4>Copy Code</h4>
<div class="square">
<p><a href="#/" id="copy-code">copy</a></p>
</div>
<textarea name="code" id="code" cols="1" rows="1">
var insideViewport=function(a){window.onscroll=function(){if(Array.isArray(a.classesNames))if(1<=a.position||0>a.position)console.log("Error! Position must be a number more than 0 and less than 1.");else{void 0===a.position&&(a.position=0);for(var d=a.classesNames,e=Array.isArray(d),f=0,d=e?d:d[Symbol.iterator]();;){var g;if(e){if(f>=d.length)break;g=d[f++]}else{if((f=d.next()).done)break;g=f.value}var h=g,b=document.getElementsByClassName(h);if(0===b.length)console.log("Error! Class(es) not found.");else for(var i=b,j=Array.isArray(i),k=0,i=j?i:i[Symbol.iterator]();;){var l;if(j){if(k>=i.length)break;l=i[k++]}else{if((k=i.next()).done)break;l=k.value}var m=l,c=m.getBoundingClientRect();0<=c.top&&0<=c.left&&c.top<=(window.innerHeight*(1-a.position)||document.documentElement.clientHeight*(1-a.position))&&c.right<=(window.innerWidth||document.documentElement.clientWidth)&&a.action(m)}}}else console.log("Error! classesNames must be an array.")}};
</textarea>
</div>
<div class="step">
<h4>Paste Code</h4>
<p>on your <span>JS</span> file</p>
</div>
<div class="step">
<h4>Call Function</h4>
<div class="square">
<p><a href="#syntax-section">syntax</a></p>
</div>
</div>
</section>
<section id="syntax-section">
<div id="explain">
<p><span class="explain-title">» Call insideViewport( { } )</span> with an object or more objects.</p>
<p><span class="explain-title">» First property:</span> <span><em>classesNames</em></span> an array of strings of classes you want to detect.</p>
<p><span class="explain-title">» Second property(optional):</span> <span><em>position</em></span> a number value from 0 to < 1. It controls position of element in viewport when the action done on it.</p>
<p><span class="explain-title">» Third property:</span> <span><em>action(elements)</em></span> which is a function to do some action on the element when in viewport.</p>
</div>
<div id="code-syntax">
<pre>
<code class="js">
insideViewport({
classesNames: ['example1', 'example2'],
position: 0.5,
action: function(elements) {
myFunction(elements)
}
},
{
classesNames: ['example3', 'example4'],
action: function(elements) {
myOtherFunction(elements)
}
})
</code>
</pre>
</div>
</section>
</main>
<footer>
<h3>insideViewport.js</h3>
<p>made with <span class="heart">♥</span> by Islam Sayed</p>
<p>0020-1202-226-308</p>
<p><a class="email" href="mailto:islam.sayed8@google.com">islam.sayed8@google.com</a></p>
<ul class="social">
<li><a href="https://twitter.com/islam_sayed8"><i class="fab fa-twitter"></i></a></li>
<li><a href="https://www.linkedin.com/in/islam-sayed-ibrahim/"><i class="fab fa-linkedin-in"></i></a></li>
<li><a href="https://github.com/Islam888"><i class="fab fa-github-alt"></i></a></li>
</ul>
</footer>
</div>
<script src="js/insideViewportInternal.js"></script>
<script src="js/main.js"></script>
</body>
</html>