-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
200 lines (161 loc) · 7.7 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
193
194
195
196
197
198
199
200
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>自然科学部ホームページ</title>
<meta name="description" content="自然科学部のホームページです">
<meta name="robots" content="noindex,nofollow"><meta name="keywords" content="">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Sawarabi+Gothic%7CTeko&display=swap" rel="stylesheet">
<!--自作のCSS-->
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/parts.css">
<link rel="stylesheet" type="text/css" href="css/layout.css">
<meta charset="UTF-8">
<title>CodePen - Text to particles</title>
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<div id="splash">
<div id="splash-logo">
<div class="loader"></div><br>Loading
</div>
<!--/splash--></div>
<div class="splashbg"></div><!---画面遷移用-->
<div id="container">
<header id="header">
<h1 id="identity"><a href="#"><span class="smoothText"><span class="smoothTextTrigger">NATURE SCIENCE CLUB</span></span></a></h1>
<div class="fixed">
<!-- partial:index.partial.html -->
<!-- Edit the text with whatever you want :) -->
<!-- Works with emojis too ! -->
<section class="palti">
<canvas id="scene"></canvas>
<input id="copy" type="text" value="しぜんかがくぶ !!" />
</section>
<!-- partial -->
<script src="./script.js"></script>
<canvas id="waveCanvas"></canvas>
<div class="scrolldown3"><span>Scroll</span></div>
<!--/fixed--></div>
</header>
<div class="openbtn smoothTrigger"><div class="openbtn-area"><span></span><span></span><span></span></div></div>
<nav id="g-nav">
<div id="g-nav-list">
<ul>
<li><a href="#header">Top</a></li>
<li><a href="#concept">Concept</a></li>
<li><a href="#service">Service</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
</nav>
<div class="circle-bg"></div>
<main id="main-area">
<section id="concept" class="fixed">
<div class="inner">
<h2><span class="smoothText"><span class="smoothTextTrigger">Concept</span></span></h2>
<h3><span class="smoothText"><span class="smoothTextTrigger">「未知」を探究する</span></span></h3>
<p><span class="smoothText"><span class="smoothTextTrigger">面白いことをしてみる<br>人間の根源たる好奇心を大切にする自然科学部は<br>あなたの"やってみたい"を叶えます</span></span></p>
<div class="smoothTrigger"><a href="#" class="btn02 rotatefront"><span>部活紹介</span><span>ABOUT US</span></a></div>
<!--/inner--></div>
</section>
<section id="service" class="fixed">
<div class="inner">
<h2><span class="smoothText"><span class="smoothTextTrigger">DEPARTMENT</span></span></h2>
<div class="service-area">
<section>
<div class="service-img">
<img src="./img/顕微鏡のフリーアイコン2.svg" width="50" height="50" alt="">
<!--/service-img--></div>
<h3><span class="smoothText"><span class="smoothTextTrigger">INVESTIGATE</span></span></h3>
<p class="caption"><span class="smoothText"><span class="smoothTextTrigger">自然科学探究</span></span></p>
<p><span class="smoothText"><span class="smoothTextTrigger">物・化・生・地、全ての<br>探究や研究、実験観察など</span></span></p>
</section>
<section>
<div class="service-img">
<img src="./img/マックブックのアイコン素材 (1).svg" width="50" height="50" alt="">
<!--/service-img--></div>
<h3><span class="smoothText"><span class="smoothTextTrigger">COMPUTER</span></span></h3>
<p class="caption"><span class="smoothText"><span class="smoothTextTrigger">ICT/電気工学</span></span></p>
<p><span class="smoothText"><span class="smoothTextTrigger">ソフト・ハード・有象無象問わない<br>コンピュータ関連</span></span></p>
</section>
<section>
<div class="service-img">
<img src="./img/ミサイルアイコン2 (1).svg" width="50" height="50" alt="">
<!--/service-img--></div>
<h3><span class="smoothText"><span class="smoothTextTrigger">ROCKET</span></span></h3>
<p class="caption"><span class="smoothText"><span class="smoothTextTrigger">ロケット打ち上げ</span></span></p>
<p><span class="smoothText"><span class="smoothTextTrigger">水ロケットや火薬ロケットなど、<br>ロケットを打ち上げる部門</span></span></p>
</section>
<!--/service-area--></div>
<div class="smoothTrigger"><a href="#" class="btn02 rotatefront"><span>詳細はこちら</span><span>ABOUT MORE</span></a></div>
<!--/inner--></div>
</section>
<section id="about" class="fixed">
<div class="inner">
<h2><span class="smoothText"><span class="smoothTextTrigger">About</span></span></h2>
<ul class="about-list smoothTrigger">
<li>
<dl>
<dt>部活名</dt><dd>立命館慶祥高等学校・自然科学部</dd>
</dl>
</li>
<li>
<dl>
<dt>設立</dt><dd>不明</dd>
</dl>
</li>
<li>
<dl>
<dt>部員数</dt><dd>約20人</dd>
</dl>
</li>
<li>
<dl>
<dt>代表</dt><dd>顧問の先生方or部活の先輩</dd>
</dl>
</li>
<li>
<dl>
<dt>所在地</dt><dd>立命館慶祥中学校・高等学校<br> 〒069-0832 <br>北海道江別市西野幌６４０−１</dd>
</dl>
</li>
<li>
<dl>
<dt>電話</dt><dd>しないでください</dd>
</dl>
</li>
</ul>
<!--/inner--></div>
</section>
<section id="contact" class="fixed">
<div class="inner">
<h2><span class="smoothText"><span class="smoothTextTrigger">Contact</span></span></h2>
<p class="tel"><a href="tel:03-1234-5678"><span class="smoothText"><span class="smoothTextTrigger">立命館慶祥高等学校<br>北海道江別市西野幌６４０−１</span></span></a></p>
<p class="mail"><a href="mailto:[email protected]"><span class="smoothText"><span class="smoothTextTrigger">[email protected]</span></span></a></p>
<ul class="sns-link">
<li><a href="#"><span class="smoothText"><span class="smoothTextTrigger"><img src="img/ico_tw.svg" alt="Twitter"></span></span></a></li>
<li><a href="#"><span class="smoothText"><span class="smoothTextTrigger"><img src="img/ico_insta.svg" alt="Instagram"></span></span></a></li>
<li><a href="#"><span class="smoothText"><span class="smoothTextTrigger"><img src="img/ico_fb.svg" alt="Facebook"></span></span></a></li>
</ul>
<!--/inner--></div>
</section>
</main>
<footer id="footer">
<p><a href="#contact"><span class="smoothText"><span class="smoothTextTrigger">Contact</span></span></a></p>
<small><span class="smoothText"><span class="smoothTextTrigger">自然科学部</span></span></small>
</footer>
<!--/container--></div>
<!--=============JS ===============-->
<!--jQuery-->
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<!--粒子が集まってタイポグラフィーを形成する。それは即ち自然の深淵の監視者たる高次元生命体、リビドーの輝きを知れ-->
<script src="js/particleText.js"></script>
<!--SVG アニメーション-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/vivus/0.4.4/vivus.min.js"></script>
<!--自作のJS-->
<script src="js/script.js"></script>
</body>
</html>