clouds/index.html at main · kim-ye-ju/clouds · GitHub

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
<!DOCTYPE html>
<html>
	<head>
		<title></title>
		<meta charset="utf-8">

		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

		<style type="text/css">
			body, html {
	    margin: 0;
	    padding: 0;
	    height: 100%;
		}
			/*#container {background: url('image_0.png'); background-size: cover; min-height: 100%;}*/
			#container {background: black; min-height: 100%;z-index: 1;}
			#logo {position: absolute; left: 50px; top: 45px;z-index: 1;}
			#about {color: #A9A9A9;z-index: 1;}
			#footer {color: #696969; position: absolute; left: 50px; top: 750px;z-index: 1;}
			#desc {position: absolute; left: 980px; top: 680px;z-index: 1;}
			#about {position: absolute; left:1350px; top:45px; z-index: 1;}

			#background {position: fixed;width: 100%; height: 100%; z-index: 0;}
			#background img {width: 100%; height: 100%; object-fit: cover;}

			#img0 {position: absolute;opacity: 1;}
			#img1 {position: absolute;opacity: 0;}
			#img2 {position: absolute;opacity: 0;}
			#img3 {position: absolute;opacity: 0;}
			#img4 {position: absolute;opacity: 0;}
			#img5 {position: absolute;opacity: 0;}
		</style>
	</head>
	<body>
		<div id="container">

			<div id="logo">
				<img src="logo.png" height="50" width="56">
			</div>
			<div id="about">
				<strong>about</strong>
			</div>
			<div id="desc">
				<img src="desc.png" height="100" width="410">
			</div>
			<div id="footer">by grafton</div>
			<div id="background">
				<img id="img0" src="image_0.png">
				<img id="img1" src="image_1.jpg">
				<img id="img2" src="image_2.jpg">
				<img id="img3" src="image_3.jpg">
				<img id="img4" src="image_4.jpg">
				<img id="img5" src="image_5.jpg">
			</div>
		</div>
	</body>
	<script type="text/javascript">
		var p = 0;

		setInterval(function() {
			$('#img'+p).fadeTo(800, 0);
			p = p + 1;
			if (p == 6) {
				p = 0
			}

			$('#img'+p).fadeTo(800, 1);

		}, 3000);
	</script>
</html>