-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathhome.html
executable file
·233 lines (203 loc) · 7.27 KB
/
home.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
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
<!DOCTYPE html>
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>fullPage.js One Page Scroll Sites</title>
<meta name="author" content="Alvaro Trigo Lopez" />
<meta name="description" content="fullPage plugin by Alvaro Trigo. Create fullscreen pages fast and simple. One page scroll like iPhone website." />
<meta name="keywords" content="fullpage,jquery,alvaro,trigo,plugin,fullscren,screen,full,iphone5,apple" />
<meta name="Resource-type" content="Document" />
<link rel="stylesheet" type="text/css" href="home/jquery.fullPage.css" />
<link rel="stylesheet" type="text/css" href="examples.css" />
<style>
/* Sections
* --------------------------------------- */
#section0 img,
#section1 img{
margin: 20px 0 0 0;
}
#section2 img{
margin: 20px 0 0 52px;
}
#section3 img{
bottom: 0px;
position: absolute;
margin-left: -420px;
}
.intro p{
width: 50%;
margin: 0 auto;
font-size: 1.5em;
}
.twitter-share-button{
position: absolute;
z-index: 99;
right: 149px;
top: 9px;
}
</style>
<!--[if IE]>
<script type="text/javascript">
var console = { log: function() {} };
</script>
<![endif]-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="home/jquery.fullPage.js"></script>
<script type="text/javascript" src="examples.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#fullpage').fullpage({
sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', 'whitesmoke', '#000'],
anchors: ['firstPage', 'secondPage', '3rdPage', '4thpage', 'lastPage'],
menu: '#menu',
scrollingSpeed: 1000
});
});
</script>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
var max_width = window.innerWidth, max_hight = window.innerHeight, NumOfPoints = 25;//initial the max width, hight and num of points in main page
var canvas = document.getElementById('canvas');//get the object
canvas.width = max_width,//set the max width
canvas.height = max_hight;//set the max hight
var context = canvas.getContext('2d');
context.strokeStyle = 'rgb(0,0,0)',//initial the stroke style
context.strokeWidth = 1,//set the stroke's width
context.fillStyle = 'rgb(0,0,0)';//fill the color into the point
var circleList = [];
function Line (x, y, _x, _y, o) {
this.origin_X = x,//initial x of the line
this.origin_Y = y,//initial y of the line
this.end_X = _x,//where x end of the line
this.end_Y = _y,//where y end of the line
this.o = o;//transparency of the line
}
function Circle(x, y, r, currX, currY){//initialize the origin of circle here
this.x = x,//initialize the x
this.y = y,//initialize the y
this.r = r,//initialize the radius
this.currX = currX,//new x where it moves to
this.currY = currY;//new y where it moves to
}
function random_Num(max, _min) {//generates a random number within the max and min
var min = arguments[1] || 0;
return Math.floor(Math.random()*(max-min+1)+min);
}
function drawCricle (cxt, x, y, r, currX, currY) {
var circle = new Circle(x, y, r, currX, currY)
cxt.beginPath()
cxt.arc(circle.x, circle.y, circle.r, 0, 2*Math.PI)
cxt.closePath()
cxt.fill();
return circle;
}
function drawLine (cxt, x, y, _x, _y, o) {//connect the two point
var line = new Line(x, y, _x, _y, o)//create the new line here
cxt.beginPath()
cxt.strokeStyle = 'rgba(0,0,0,'+ o +')'//make the line to stroke
cxt.moveTo(line.origin_X, line.origin_Y)//the destination where the line moves to by x
cxt.lineTo(line.end_X, line.end_Y)//the desination where the line moves to by y
cxt.closePath()
cxt.stroke();
}
function resize(){
canvas.width = window.innerWidth,//set the max width
canvas.height = window.innerHeight;//set the max hight
context.fillStyle = 'rgba(0,0,0,0.2)';
}
function origin() {//creates origin for each new pinte in html, and limit the number of points that will be generated in html
circleList = [];
for (var i = 0; i < NumOfPoints; i++) {//counts down the number of the points that have been drawn
circleList.push(drawCricle(context, random_Num(max_width), random_Num(max_hight), random_Num(15, 2), random_Num(10, -10)/40, random_Num(10, -10)/40));
}
draw();
resize();
}
function draw() {//make each small part to move by updating the x and y
context.clearRect(0,0,canvas.width, canvas.height);//clean the old line here
for (var i = 0; i < NumOfPoints; i++) {//loop the circle in the circleList
drawCricle(context, circleList[i].x, circleList[i].y, circleList[i].r);
}
for (var i = 0; i < NumOfPoints; i++) {//loop the circle in the circleList
for (var j = 0; j < NumOfPoints; j++) {
if (i + j < NumOfPoints) {
var A = Math.abs(circleList[i+j].x - circleList[i].x),
B = Math.abs(circleList[i+j].y - circleList[i].y);
var lineLength = Math.sqrt(A*A + B*B);//get the area
var C = 1/lineLength*7-0.009;
var lineOpacity = C > 0.03 ? 0.03 : C;
if (lineOpacity > 0) {
drawLine(context, circleList[i].x, circleList[i].y, circleList[i+j].x, circleList[i+j].y, lineOpacity);
}
}
}
}
}
window.onload = function () {
origin();
setInterval(function () {//load the function to start drawing
for (var i = 0; i < NumOfPoints; i++) {
var cir = circleList[i];
cir.x += cir.currX;
cir.y += cir.currY;
if (cir.x > max_width) cir.x = 0;
else if (cir.x < 0) cir.x = max_width;
if (cir.y > max_hight) cir.y = 0;
else if (cir.y < 0) cir.y = max_hight;
}
draw();
}, 16);
}
</script>
<ul id="menu">
<li data-menuanchor="firstPage"><a href="#firstPage">Back to Top</a></li>
<li data-menuanchor="secondPage"><a href="main.html">Enter</a></li>
</ul>
<div id="fullpage">
<div class="section " id="section0">
<h1>TechHub.net </h1><p>Share Your Experience and Comment with Your Favorite Tech</p>
<img src="home/fullPage.png" alt="fullPage" />
</div>
<div class="section" id="section1">
<div class="slide">
<div class="intro">
<h1>What's New?</h1><p>Getting Latest Tech Reviews from Your Own Feed</p>
<img src="home/2.png" alt="slider" />
</div>
</div>
<div class="slide">
<div class="intro">
<h1>Fast</h1>
<p>Works like twitter, but more than twitter!</p>
</div>
</div>
<div class="slide">
<div class="intro">
<h1>Real</h1>
<p>Ad?No chance!</p>
</div>
</div>
<div class="slide">
<div class="intro">
<h1>All in One</h1>
<p>You can find everything here</p>
</div>
</div>
</div>
<div class="section" id="section2">
<div class="intro">
<h1>Hate it? Like it?</h1><p>Share Your Opinions with Millions of Users</p>
<img src="home/3.png" alt="example" />
</div>
</div>
<div class="section" id="section3">
<div class="intro">
<h1>Ready?</h1><p><a href="main.html">Enter Tech World!</a></p>
</div>
</div>
</div>
</body>
</html>