-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.js
323 lines (309 loc) · 15 KB
/
index.js
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
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
alert('Hello there!\nThis is my first project that is entirely based on JavaScript.\nScroll down to begin! :D');
function topFunction() {
document.body.scrollTop = 0; // For Safari
document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
}
window.onscroll = function () {
scrollFunction()
};
function scrollFunction() {
if (document.body.scrollTop == 0 ||
document.documentElement.scrollTop == 0) {
document.getElementById("scroll").style.display="block";
document.getElementById("arrow").style.display="block";
}
if (document.body.scrollTop > 10 ||
document.documentElement.scrollTop > 10) {
document.getElementById("main").style.backgroundImage = "linear-gradient(to right, transparent 19px, rgba(65, 65, 65, 0.607) 1px),linear-gradient(to bottom, transparent 19px, rgba(65, 65, 65, 0.605) 1px)";
document.getElementById("main").style.backgroundSize = "20px 20px";
document.getElementById("main").style.backgroundAttachment = "fixed";
document.getElementById("main").style.opacity = "1";
document.getElementById("text").style.fontSize="25px";
}
if (document.body.scrollTop > 20 ||
document.documentElement.scrollTop > 20) {
document.getElementById("text").style.fontSize="18px";
}
if (document.body.scrollTop < 20 ||
document.documentElement.scrollTop < 20) {
document.getElementById("int").style.opacity = "0";
document.getElementById("text").innerHTML = "Scroll slowly for better experience...";
}
if (document.body.scrollTop > 100 ||
document.documentElement.scrollTop > 100) {
document.getElementById("a").style.width = "80vw";
}
if (document.body.scrollTop < 100 ||
document.documentElement.scrollTop < 100) {
document.getElementById("a").style.width = "0vw";
}
if (document.body.scrollTop > 200 ||
document.documentElement.scrollTop > 200) {
document.getElementById("int").style.opacity = "1";
}
if (document.body.scrollTop > 1200 ||
document.documentElement.scrollTop > 1200) {
document.getElementById("int").style.scale = "0.6";
document.getElementById("int").style.top = "20vh";
document.getElementById("int").style.marginLeft = "23vw";
document.getElementById("a").style.width = "80vw";
document.getElementById("a").style.left = "10vw";
document.getElementById("a").style.top = "67.8vh";
document.getElementById("a1").style.right = "-50vw";
document.getElementById("b1").style.right = "-50vw";
document.getElementById("c1").style.right = "-50vw";
document.getElementById("d1").style.right = "-50vw";
}
else {
document.getElementById("a").style.width = "80vw";
document.getElementById("a").style.left = "10vw";
document.getElementById("a").style.top = "80vh";
document.getElementById("int").style.scale = "1";
document.getElementById("int").style.top = "0vh";
document.getElementById("int").style.marginLeft = "0vw";
document.getElementById("a1").style.right = "-50vw";
document.getElementById("b1").style.right = "-50vw";
document.getElementById("c1").style.right = "-50vw";
document.getElementById("d1").style.right = "-50vw";
}
if (document.body.scrollTop > 1100 ||
document.documentElement.scrollTop > 1100) {
document.getElementById("text").innerHTML = "Keep scrolling...";
document.getElementById("b").style.height = "39vh";
document.getElementById("c").style.height = "60vh";
document.getElementById("b").style.top = "40vh";
document.getElementById("c").style.top = "20vh";
document.getElementById("w").style.top = "24vh";
document.getElementById("x").style.top = "39vh";
document.getElementById("y").style.top = "24vh";
document.getElementById("z").style.top = "24vh";
document.getElementById("c2").style.height = "0vh";
document.getElementById("d2").style.height = "0vh";
document.getElementById("e2").style.height = "0vh";
document.getElementById("f2").style.height = "0vh";
document.getElementById("c2").style.top = "39vh";
document.getElementById("d2").style.top = "39vh";
document.getElementById("e2").style.top = "39vh";
document.getElementById("f2").style.top = "39vh";
document.getElementById("a2").style.top = "39vh";
document.getElementById("a2").style.height = "1px";
document.getElementById("l1").style.left = "48vw";
document.getElementById("m1").style.left = "48vw";
document.getElementById("n1").style.left = "48vw";
document.getElementById("o1").style.left = "86vw";
document.getElementById("e1").style.left = "14vw";
document.getElementById("f1").style.left = "14vw";
document.getElementById("g1").style.left = "14vw";
document.getElementById("u").style.height = "0vh";
document.getElementById("v").style.height = "0vh";
document.getElementById("a1").style.right = "-50vw";
document.getElementById("b1").style.right = "-50vw";
document.getElementById("c1").style.right = "-50vw";
document.getElementById("d1").style.right = "-50vw";
}
else {
document.getElementById("b").style.height = "59vh";
document.getElementById("c").style.height = "40vh";
document.getElementById("b").style.top = "20vh";
document.getElementById("c").style.top = "40vh";
document.getElementById("w").style.top = "44vh";
document.getElementById("x").style.top = "59vh";
document.getElementById("y").style.top = "44vh";
document.getElementById("z").style.top = "44vh";
document.getElementById("c2").style.height = "15vh";
document.getElementById("d2").style.height = "15vh";
document.getElementById("e2").style.height = "15vh";
document.getElementById("f2").style.height = "15vh";
document.getElementById("c2").style.top = "24vh";
document.getElementById("d2").style.top = "24vh";
document.getElementById("e2").style.top = "24vh";
document.getElementById("f2").style.top = "24vh";
document.getElementById("a2").style.top = "24vh";
document.getElementById("a2").style.height = "4px";
document.getElementById("l1").style.left = "14vw";
document.getElementById("m1").style.left = "14vw";
document.getElementById("n1").style.left = "14vw";
document.getElementById("o1").style.left = "52vw";
document.getElementById("e1").style.left = "50vw";
document.getElementById("f1").style.left = "50vw";
document.getElementById("g1").style.left = "86vw";
document.getElementById("u").style.height = "15vh";
document.getElementById("v").style.height = "15vh";
document.getElementById("text").innerHTML = "House";
}
if (document.body.scrollTop > 1600 ||
document.documentElement.scrollTop > 1600) {
document.getElementById("int").style.marginLeft = "37vw";
document.getElementById("text").innerHTML = "House With Garage";
}
if (document.body.scrollTop > 400 ||
document.documentElement.scrollTop > 400) {
document.getElementById("p2").style.height = "15vh";
document.getElementById("p2").style.top = "65vh";
}
else {
document.getElementById("p2").style.height = "0vh";
document.getElementById("p2").style.top = "80vh";
}
if (document.body.scrollTop > 650 ||
document.documentElement.scrollTop > 650) {
document.getElementById("r2").style.width = "6vw";
document.getElementById("r2").style.height = "6vw";
document.getElementById("r2").style.left = "8vw";
document.getElementById("r2").style.top = "62vh";
}
else {
document.getElementById("r2").style.width = "0vw";
document.getElementById("r2").style.height = "0vw";
document.getElementById("r2").style.left = "11vw";
document.getElementById("r2").style.top = "65vh";
}
if (document.body.scrollTop > 1800 ||
document.documentElement.scrollTop > 1800) {
document.getElementById("o2").style.height = "15vh";
document.getElementById("o2").style.top = "65vh";
document.getElementById("q2").style.height = "6vw";
document.getElementById("q2").style.width = "6vw";
}
if (document.body.scrollTop > 2000 ||
document.documentElement.scrollTop > 2000) {
document.getElementById("s2").style.height = "5vh";
document.getElementById("t2").style.height = "5vh";
document.getElementById("u2").style.height = "5vh";
document.getElementById("v2").style.height = "5vh";
document.getElementById("w2").style.height = "5vh";
document.getElementById("x2").style.height = "5vh";
document.getElementById("y2").style.height = "5vh";
document.getElementById("z2").style.height = "5vh";
document.getElementById("a3").style.height = "5vh";
document.getElementById("b3").style.height = "5vh";
document.getElementById("c3").style.height = "5vh";
document.getElementById("d3").style.height = "5vh";
document.getElementById("e3").style.height = "5vh";
document.getElementById("s2").style.top = "75vh";
document.getElementById("t2").style.top = "75vh";
document.getElementById("u2").style.top = "75vh";
document.getElementById("v2").style.top = "75vh";
document.getElementById("w2").style.top = "75vh";
document.getElementById("x2").style.top = "75vh";
document.getElementById("y2").style.top = "75vh";
document.getElementById("z2").style.top = "75vh";
document.getElementById("a3").style.top = "75vh";
document.getElementById("b3").style.top = "75vh";
document.getElementById("c3").style.top = "75vh";
document.getElementById("d3").style.top = "75vh";
document.getElementById("e3").style.top = "75vh";
document.getElementById("f3").style.top = "77vh";
document.getElementById("f3").style.opacity = "1";
document.getElementById("a").style.left = "0vw";
document.getElementById("a").style.width = "90vw";
document.getElementById("g3").style.width = "61vw";
document.getElementById("g3").style.opacity = "1";
document.getElementById("g3").style.left = "-45vw";
document.getElementById("h3").style.height = "21vh";
document.getElementById("h3").style.opacity = "1";
document.getElementById("h3").style.top = "59vh";
}
else {
document.getElementById("s2").style.height = "0vh";
document.getElementById("t2").style.height = "0vh";
document.getElementById("u2").style.height = "0vh";
document.getElementById("v2").style.height = "0vh";
document.getElementById("w2").style.height = "0vh";
document.getElementById("x2").style.height = "0vh";
document.getElementById("y2").style.height = "0vh";
document.getElementById("z2").style.height = "0vh";
document.getElementById("a3").style.height = "0vh";
document.getElementById("b3").style.height = "0vh";
document.getElementById("c3").style.height = "0vh";
document.getElementById("d3").style.height = "0vh";
document.getElementById("e3").style.height = "0vh";
document.getElementById("s2").style.top = "80vh";
document.getElementById("t2").style.top = "80vh";
document.getElementById("u2").style.top = "80vh";
document.getElementById("v2").style.top = "80vh";
document.getElementById("w2").style.top = "80vh";
document.getElementById("x2").style.top = "80vh";
document.getElementById("y2").style.top = "80vh";
document.getElementById("z2").style.top = "80vh";
document.getElementById("a3").style.top = "80vh";
document.getElementById("b3").style.top = "80vh";
document.getElementById("c3").style.top = "80vh";
document.getElementById("d3").style.top = "80vh";
document.getElementById("e3").style.top = "80vh";
document.getElementById("f3").style.top = "80vh";
document.getElementById("f3").style.opacity = "0";
document.getElementById("g3").style.width = "0vw";
document.getElementById("g3").style.opacity = "0";
document.getElementById("g3").style.left = "16vw";
document.getElementById("h3").style.height = "0vh";
document.getElementById("h3").style.opacity = "0";
document.getElementById("h3").style.top = "80vh";
}
if (document.body.scrollTop > 2300 ||
document.documentElement.scrollTop > 2300) {
document.getElementById("text").innerHTML = "House With Garage & a car in it :P";
document.getElementById("car").style.left = "-40vw";
document.getElementById("a").style.left = "10vw";
document.getElementById("a").style.width = "80vw";
document.getElementById("i3").style.height = "0vh";
document.getElementById("j3").style.height = "0vh";
document.getElementById("i3").style.top = "80vh";
document.getElementById("j3").style.top = "80vh";
}
else {
document.getElementById("car").style.left = "-120vw";
}
if (document.body.scrollTop > 2700 ||
document.documentElement.scrollTop > 2700) {
document.getElementById("int").style.scale = "0.4";
document.getElementById("int").style.top = "30vh";
document.getElementById("int").style.marginLeft = "26vw";
document.getElementById("a").style.width = "84vw";
document.getElementById("a").style.left = "8vw";
document.getElementById("a").style.top = "62vh";
document.getElementById("i3").style.height = "7vh";
document.getElementById("j3").style.height = "7vh";
document.getElementById("i3").style.top = "73.2vh";
document.getElementById("j3").style.top = "73.2vh";
document.getElementById("text").innerHTML = "House With Garage and Lawn";
document.getElementById("tr1").style.opacity = "1";
document.getElementById("tr2").style.opacity = "1";
document.getElementById("tr3").style.opacity = "0.8";
}
else {
if (document.body.scrollTop > 1400 ||
document.documentElement.scrollTop > 1400) {
document.getElementById("int").style.scale = "0.6";
document.getElementById("tr1").style.opacity = "0";
document.getElementById("tr2").style.opacity = "0";
document.getElementById("tr3").style.opacity = "0";
}
else {
document.getElementById("int").style.scale = "1";
document.getElementById("int").style.top = "0vh";
document.getElementById("int").style.marginLeft = "0vw";
document.getElementById("a").style.width = "80vw";
document.getElementById("a").style.left = "10vw";
document.getElementById("a").style.top = "80vh";
document.getElementById("i3").style.height = "0vh";
document.getElementById("j3").style.height = "0vh";
document.getElementById("i3").style.top = "80vh";
document.getElementById("j3").style.top = "80vh";
document.getElementById("tr1").style.opacity = "0";
document.getElementById("tr2").style.opacity = "0";
document.getElementById("tr3").style.opacity = "0";
}
}
if (document.body.scrollTop > 3300 ||
document.documentElement.scrollTop > 3300) {
document.getElementById("text").innerHTML = "Thank You! :)";
}
if (document.body.scrollTop > 3300 ||
document.documentElement.scrollTop > 3300) {
document.getElementById("myBtn").style.display = "block";
}
else {
document.getElementById("myBtn").style.display = "none";
}
}