├── index2.html
├── index.html
├── README.md
├── particleText.min.js
└── particleText.js
/index2.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | particleText
6 |
7 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
46 |
47 |
48 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | particleText
6 |
7 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
44 |
45 |
46 |
47 |
48 |
49 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # particleText.js
2 | パーティクルで文字を描画します。
3 |
4 |
5 | ## 1.描画するcanvasタグの準備
6 | canvasタグに任意のidかclassを指定。
7 |
8 |
9 |
10 |
17 |
18 | ## 2.jQueryとparticleText.jsを読み込み
19 |
20 |
21 |
22 |
23 | ## 3.実行方法
24 | particleText（)の中に描画したい文字列を入れる。
25 |
26 |
55 |
56 |
57 | ### メソッドチェーン非対応
58 |
59 | ### height: 300px;以上推奨！
60 |
--------------------------------------------------------------------------------
/particleText.min.js:
--------------------------------------------------------------------------------
1 | (function(a){a.fn.particleText =function(p){var k="";if(this[0].className){k="."+this[0].className}if(this[0].id){k="#"+this[0].id}var f=document.querySelector(k);var o=f.getContext("2d");var i=f.width=f.clientWidth;var c=f.height=f.clientHeight;var m="";var l=0.09;if(p.speed){if(p.speed=="middle"){l=0.07}else{if(p.speed=="slow"){l=0.04}else{if(p.speed=="high"){l=0.09}}}}if(p.text){m=p.text}else{m=p}var b=["#F54064","#F5D940","#18EBF2"];if(p.colors){b=p.colors}var e=false;if(m.indexOf("
")!=-1){e=true}var n=[],j=0;function g(r,q){this.x=Math.random()*i;this.y=Math.random()*c;this.goal={x:r,y:q};this.r=f.clientWidth/2*0.003;this.color=b[Math.floor(Math.random()*b.length)]}g.prototype.render=function(){this.x+=(this.goal.x-this.x)*l;this.y+=(this.goal.y-this.y)*l;o.fillStyle=this.color;o.beginPath();o.arc(this.x,this.y,this.r,Math.PI*2,false);o.fill()};function h(){var x=f.width=f.clientWidth;var r=f.height=f.clientHeight;o.clearRect(0,0,f.width,f.height);var w=10;o.font="bold "+(x/w)+"px sans-serif";o.textAlign="center";if(!e){v()}else{q()}function v(){var y=2;if(f.height<=300&&f.width>768){y=1.5}o.fillText(m,x/2,r/y,x)}function q(){var D=m;var C="
";var A=D.split("
");var y=r/A.length;var z=A.length;var F=768;var E=0.8;for(var B=0;B150){n.push(new g(t,s))}}}j=n.length}function d(q){requestAnimationFrame(d);o.clearRect(0,0,f.width,f.height);for(var r=0;r") != -1) {
43 | flg = true;
44 | }
45 |
46 |
47 | var particles = [],num = 0;
48 |
49 | function Particle(ax,ay){
50 | this.x = Math.random()*ww;
51 | this.y = Math.random()*wh;
52 | this.goal = {
53 | x : ax,
54 | y: ay
55 | };
56 | this.r = canvas.clientWidth / 2 * 0.003;
57 | this.color = colors[Math.floor(Math.random() * colors.length)];
58 | }
59 |
60 |
61 |
62 | Particle.prototype.render = function() {
63 | this.x += (this.goal.x - this.x) * easing;
64 | this.y += (this.goal.y - this.y) * easing;
65 | ctx.fillStyle = this.color;
66 | ctx.beginPath();
67 | ctx.arc(this.x, this.y, this.r, Math.PI * 2, false);
68 | ctx.fill();
69 |
70 | }
71 |
72 |
73 |
74 | function initScene(){
75 |
76 | var ww = canvas.width = canvas.clientWidth;
77 | var wh = canvas.height = canvas.clientHeight;
78 | ctx.clearRect(0, 0, canvas.width, canvas.height);
79 | var fSize = 10;
80 | ctx.font = "bold "+(ww/fSize)+"px sans-serif";
81 | ctx.textAlign = "center";
82 |
83 |
84 | if(!flg){
85 | drawOneText();
86 | } else {
87 | drawManyLineText();
88 | }
89 |
90 |
91 | function drawOneText(){
92 | var hp = 2;
93 | if(canvas.height <= 300 && canvas.width > 768){
94 | hp = 1.5;
95 | }
96 | ctx.fillText(text, ww/2, wh/hp, ww);
97 | }
98 |
99 |
100 | function drawManyLineText(){
101 |
102 | var tagetString = text;
103 | var br = "
";
104 | var arrayStrig = tagetString.split("
");
105 | var height = wh / arrayStrig.length;
106 | var line = arrayStrig.length;
107 | var _brakeP = 768;
108 |
109 | var h = 0.8;
110 | for(var i = 0; i 150){
127 | particles.push(new Particle(i,j));
128 | }
129 | }
130 | }
131 |
132 | num = particles.length;
133 |
134 | }
135 |
136 |
137 | function render(a) {
138 |
139 | requestAnimationFrame(render);
140 |
141 | ctx.clearRect(0, 0, canvas.width, canvas.height);
142 |
143 | for (var i = 0; i < num; i++) {
144 | particles[i].render();
145 | }
146 | };
147 |
148 | window.addEventListener("resize", initScene);
149 |
150 | initScene();
151 |
152 | requestAnimationFrame(render);
153 |
154 | };
155 | })(jQuery);
156 |
--------------------------------------------------------------------------------