-
Notifications
You must be signed in to change notification settings - Fork 0
/
award-scroll.html
172 lines (168 loc) · 8.74 KB
/
award-scroll.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
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@500&display=swap" rel="stylesheet">
<style>
body {
margin: 0;
overflow: hidden;
white-space: nowrap;
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none;
font-family: 'Noto Sans KR';
display: flex;
justify-content: center;
}
.container {
position: fixed;
bottom: var(--fixed-y);
display: flex;
flex-direction: column;
/* justify-content: center; */
}
.scroll-item {
color: #202020;
font-size: 1rem;
height: 1rem;
align-self: center;
padding: 0;
margin: 0.5rem 0;
}
</style>
</head>
<body>
<div class="container">
<div class="scroll-item"> 🏆 2021 JA Korea·삼성 창업놀이터 (2) 🏆 </div>
<div class="scroll-item"> 🏆 2021 국민대·JA Korea 온라인 창업캠프 (1) 🏆 </div>
<div class="scroll-item"> 🏆 2021 STA+C 스마틴앱챌린지 (2) 🏆 </div>
<div class="scroll-item"> 🏆 2021 생활SOC 공모전 (3) 🏆 </div>
<div class="scroll-item"> 🏆 2021 비즈메이커 아이디어 경진대회 (1) 🏆 </div>
<div class="scroll-item"> 🏆 2021 전국 고등학생 바이오안정성·바이오산업 토론대회 (2) 🏆 </div>
<div class="scroll-item"> 🏆 경기청년한마당투어 창업 아이디어 오디션 (1) 🏆 </div>
<div class="scroll-item"> 🏆 스마트리빙 메이커톤 (1) 🏆 </div>
<div class="scroll-item"> 🏆 경기 특성화고 스타트업 스프링보드 (2) 🏆 </div>
<div class="scroll-item"> 🏆 Aim High 고등창업캠프 (2) 🏆 </div>
<div class="scroll-item"> 🏆 제 15회 AppJam 미래산업부문 (1) 🏆 </div>
<div class="scroll-item"> 🏆 산업 현장 안전 메이커톤 (1) 🏆 </div>
<div class="scroll-item"> 🏆 한국청소년정보과학회 해커톤 (2,3,특별상) 🏆 </div>
<div class="scroll-item"> 🏆 2018 Hello New() World (3) 🏆 </div>
<div class="scroll-item"> 🏆 2018 국가슈퍼컴퓨팅 청소년 캠프 (3) 🏆 </div>
<div class="scroll-item"> 🏆 제 16회 AppJam 미래산업부문 (1) 🏆 </div>
<div class="scroll-item"> 🏆 학생창업유망팀 300+ 우수 동아리(1) 🏆 </div>
<div class="scroll-item"> 🏆 2018 STA+C 스마틴앱챌린지 (3) 🏆 </div>
<div class="scroll-item"> 🏆 ICT 메이커톤 (1) 🏆 </div>
<div class="scroll-item"> 🏆 불법 스포츠 도박 근절 해커톤 (1) 🏆 </div>
<div class="scroll-item"> 🏆 전국 비즈쿨 우수 창업 동아리 (3) 🏆 </div>
<div class="scroll-item"> 🏆 IF 해커톤 (1) 🏆 </div>
<div class="scroll-item"> 🏆 2018 비즈쿨 유공 학생 표창 (1) 🏆 </div>
<div class="scroll-item"> 🏆 창의 IT 공모전 (4) 🏆 </div>
<div class="scroll-item"> 🏆 비즈쿨성과발표 우수동아리 (3) 🏆 </div>
<div class="scroll-item"> 🏆 2018 대한민국 청소년 창업경진대회 (3) 🏆 </div>
<div class="scroll-item"> 🏆 방송영상 뉴미디어 콘텐츠 아이디어톤 (2) 🏆 </div>
<div class="scroll-item"> 🏆 2019 디미고 해커톤 (1) 🏆 </div>
<div class="scroll-item"> 🏆 2019 AngelHack Hackathon (1) 🏆 </div>
<div class="scroll-item"> 🏆 2019 국가슈퍼컴퓨팅 청소년 캠프 (3) 🏆 </div>
<div class="scroll-item"> 🏆 2019 Hello New() World (1,2) 🏆 </div>
<div class="scroll-item"> 🏆 SDS/JA Smart Hackathon (LUNA) (2) 🏆 </div>
<div class="scroll-item"> 🏆 디자인씽킹 해커톤 (4) 🏆 </div>
<div class="scroll-item"> 🏆 소셜벤처 경연대회 (서울권역) (2) 🏆 </div>
<div class="scroll-item"> 🏆 유관순상/유관순횃불상 (1) 🏆 </div>
<div class="scroll-item"> 🏆 2019 대한민국 청소년 창업경진대회 (1,2,3,특별상) 🏆 </div>
<div class="scroll-item"> 🏆 방구석 메이커톤 (1) 🏆 </div>
<div class="scroll-item"> 🏆 한국코드페어 착한상상 (2) 🏆 </div>
<div class="scroll-item"> 🏆 ICT 장애인 보조공학기기 공모전 (특별상) 🏆 </div>
<div class="scroll-item"> 🏆 KAIST 전국 고등학교 동아리 소프트웨어 공모전 (3) 🏆 </div>
<div class="scroll-item"> 🏆 데이터 크리에이터 캠프 (1,2) 🏆 </div>
<div class="scroll-item"> 🏆 대한민국 바로 알리기 AI 공모전 (3) 🏆 </div>
<div class="scroll-item"> 🏆 TCE X AI CODE FAIR (1) 🏆 </div>
<div class="scroll-item"> 🏆 2018 삼성 주니어 소프트웨어 창작대회 (3) 🏆 </div>
<div class="scroll-item"> 🏆 2018 Smart Hackers Digital Leadership 'Do Re Mi’ (3) 🏆 </div>
<div class="scroll-item"> 🏆 2018 수원정보과학축제 3D 프린팅 해커톤 (1) 🏆 </div>
<div class="scroll-item"> 🏆 2018 임팩터톤 (1) 🏆 </div>
<div class="scroll-item"> 🏆 2018 전국 동아리 경진대회 (3) 🏆 </div>
<div class="scroll-item"> 🏆 제 17회 AppJam 미래산업부문 (1) 🏆 </div>
<div class="scroll-item"> 🏆 2019 하이톤 생활부문 (1) 🏆 </div>
<script>
container = document.getElementsByClassName('container')[0];
items = document.getElementsByClassName('scroll-item');
containerH = container.offsetHeight;
itemH = containerH / items.length;
console.log(itemH);
fixedY = 0;
justMoved = false;
justMovedClearTimeoutId = null;
checkOvered = () => {
if (fixedY < -(containerH - window.innerHeight)) {
fixedY = -(containerH - window.innerHeight);
container.style.top = fixedY + 'px';
}
if (fixedY > 0) {
fixedY = 0;
container.style.top = fixedY + 'px';
}
return 0;
// 아이콘이 왼쪽을 넘어갔는지 확인
while (-fixedY >= itemH) {
let ele = items[0].cloneNode(true);
container.appendChild(ele);
items[0].remove();
items = document.getElementsByClassName('scroll-item');
fixedY += itemH;
container.style.top = fixedY + 'px';
}
// 아이콘이 오른쪽을 넘어갔는지 확인
while (fixedY >= 0) {
let ele = items[items.length-1].cloneNode(true);
container.insertBefore(ele, container.firstChild);
items[items.length-1].remove();
items = document.getElementsByClassName('scroll-item');
fixedY -= itemH;
container.style.top = fixedY + 'px';
}
};
setInterval(
() => {
if (!justMoved) {
container.style.top = fixedY + 'px';
fixedY -= 1;
checkOvered();
}
},
15
);
document.body.addEventListener('wheel', (event) => {
var delta = (event.deltaX == 0) ? event.deltaY : event.deltaX;
if (Math.abs(delta) >= 10) {
var alpha = 1 * delta / Math.abs(delta);
var gamma = alpha;
step = () => {
fixedY -= gamma;
container.style.top = fixedY + 'px';
checkOvered();
gamma += alpha;
if (Math.abs(gamma) < Math.abs(delta/10)) {
setTimeout(step, 5);
}
}
setTimeout(step, 5);
}
fixedY -= delta;
container.style.top = fixedY + 'px';
checkOvered();
justMoved = true;
if (justMovedClearTimeoutId !== null) {
clearTimeout(justMovedClearTimeoutId);
}
justMovedClearTimeoutId = setTimeout(() => {
justMoved = false;
}, 1000);
event.preventDefault();
return false;
}, {passive: false});
</script>
</body>
</html>