Skip to content

Commit ec62691

Browse files
alskd82alskd82
committedJan 19, 2022
first commit
0 parents  commit ec62691

8 files changed

+17644
-0
lines changed
 

‎.gitignore

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
node_modules

‎@/index.html

+130
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,130 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title> Confetti </title>
8+
9+
<link rel="stylesheet" href="https://yjs-ixd.com/sample/guide/css/androidstudio.min.css">
10+
<script src="https://yjs-ixd.com/sample/guide/js/highlight.js"></script>
11+
<script>hljs.initHighlightingOnLoad();</script>
12+
13+
<style>
14+
html, body{ width: 100%; height: 100%; }
15+
body{ margin: 0; padding: 0; display: flex; align-items: center; flex-direction: column;}
16+
body > section { flex: 0 0 auto}
17+
.screen{
18+
position: relative;
19+
box-sizing: border-box; width: 100%; height: 640px;
20+
display: flex; justify-content: center; align-items: center;
21+
}
22+
.screen button{ position: relative; z-index: 1; width: 100px; height: 80px; }
23+
#canvas-confetti{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 999; pointer-events: none;}
24+
25+
.guide{ background-color: #282B2E; width: 100%; font-size: 14px; padding-bottom: 100px; }
26+
.guide code { max-width: 960px; margin: 0 auto;}
27+
</style>
28+
</head>
29+
<body>
30+
31+
<section class="screen">
32+
<button type="button"> Play </button>
33+
<canvas id="canvas-confetti"></canvas>
34+
</section>
35+
36+
37+
<section class="guide">
38+
<div>
39+
<pre><code>
40+
/*
41+
[ 캔버스 콘페티 라이브러리 ]
42+
- https://github.com/catdad/canvas-confetti
43+
- https://www.npmjs.com/package/canvas-confetti
44+
45+
&lt;script&gt; &lt;src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.4.0/dist/confetti.browser.min.js"&gt; &lt;/script&gt;
46+
47+
*/
48+
const ConfettiShow = (function(exports){
49+
const count = 50;
50+
const defaultOpations = {
51+
shapes: ['circle'], // 파티클 모양
52+
colors: ['#286ef1', '#fc7398', '#76a5fd', '#ac86ff'] // 파티클 색상
53+
}
54+
function play(targetCanvas){
55+
const myConfetti = confetti.create(document.querySelector(targetCanvas), { resize: true, useWorker: true });
56+
function fire(particleRatio,opts) {
57+
myConfetti({
58+
particleCount: Math.floor(count * particleRatio),
59+
...defaultOpations,
60+
...opts
61+
})
62+
};
63+
64+
fire(0.25, { startVelocity: 15, spread: 360,angle: 90, ticks: 120, scalar:1.2});
65+
setTimeout(()=>{
66+
fire(0.35, { startVelocity: 30, spread: 150, ticks: 150, scalar:1.3});
67+
}, 50)
68+
setTimeout(()=>{
69+
fire(0.1, { startVelocity: 10, spread: 360, ticks: 100, scalar:1.2});
70+
}, 80)
71+
}
72+
exports.play = play;
73+
return exports;
74+
})({});
75+
export default ConfettiShow;
76+
77+
78+
/* ---------------------------------------------- */
79+
ConfettiShow.play( 캔버스 ID )
80+
/* ---------------------------------------------- */
81+
82+
document.querySelector('button').addEventListener('click', e=>{
83+
ConfettiShow.play( '#canvas-confetti' )
84+
});
85+
86+
</code></pre>
87+
</div>
88+
89+
</section>
90+
91+
<script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.4.0/dist/confetti.browser.min.js"></script>
92+
<!-- <script type="module" src="./src/confetti.js"></script> -->
93+
<script type="module" >
94+
const ConfettiShow = (function(exports){
95+
const count = 50;
96+
const defaultOpations = {
97+
shapes: ['circle'],
98+
colors: ['#286ef1', '#fc7398', '#76a5fd', '#ac86ff']
99+
}
100+
function play(targetCanvas){
101+
const myConfetti = confetti.create(document.querySelector(targetCanvas), { resize: true, useWorker: true });
102+
function fire(particleRatio,opts) {
103+
myConfetti({
104+
particleCount: Math.floor(count * particleRatio),
105+
...defaultOpations,
106+
...opts
107+
})
108+
};
109+
110+
fire(0.25, { startVelocity: 15, spread: 360,angle: 90, ticks: 120, scalar:1.2});
111+
setTimeout(()=>{
112+
fire(0.35, { startVelocity: 30, spread: 150, ticks: 150, scalar:1.3});
113+
}, 50)
114+
setTimeout(()=>{
115+
fire(0.1, { startVelocity: 10, spread: 360, ticks: 100, scalar:1.2});
116+
}, 80)
117+
}
118+
exports.play = play;
119+
return exports;
120+
})({});
121+
export default ConfettiShow;
122+
123+
124+
document.querySelector('button').addEventListener('click', e=>{
125+
ConfettiShow.play( '#canvas-confetti' )
126+
});
127+
128+
</script>
129+
</body>
130+
</html>

‎babel.config.js

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
module.exports = {
2+
presets: [
3+
['@babel/preset-env', {
4+
targets: {
5+
chrome: '58',
6+
ie: '11',
7+
},
8+
useBuiltIns: 'usage', // 폴리필 사용 방식 지정
9+
corejs: { // 폴리필 버전 지정 => corejs 라는 폴리필 라이브러리 설치 후
10+
version: 3,
11+
}
12+
}]
13+
]
14+
};

‎index.html

+35
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title> Confetti </title>
8+
9+
10+
<style>
11+
html, body{ width: 100%; height: 100%; }
12+
body{ margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; flex-direction: column;}
13+
body > section { flex: 0 0 auto}
14+
.screen{
15+
position: relative;
16+
box-sizing: border-box; width: 100%; height: 640px;
17+
display: flex; justify-content: center; align-items: center;
18+
}
19+
.screen button{ position: relative; z-index: 1; width: 100px; height: 80px; }
20+
#canvas-confetti{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 999; pointer-events: none;}
21+
22+
</style>
23+
</head>
24+
<body>
25+
26+
<section class="screen">
27+
<button type="button"> Play </button>
28+
<canvas id="canvas-confetti"></canvas>
29+
</section>
30+
31+
<div class="box" style="background-color:black; width: 100px; height: 100px;"></div>
32+
33+
34+
</body>
35+
</html>

0 commit comments

Comments
 (0)
Please sign in to comment.