Skip to content

Commit 763da06

Browse files
VincentGarreauVincentGarreau
committed
init parallax
1 parent a33d0cb commit 763da06

File tree

2 files changed

+51
-24
lines changed

2 files changed

+51
-24
lines changed

‎demo/js/app.js

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -87,7 +87,12 @@ particlesJS('particles-js',
8787
"events": {
8888
"onhover": {
8989
"enable": true,
90-
"mode": "repulse"
90+
"mode": "repulse",
91+
"parallax": {
92+
"enable": true,
93+
"force": 2,
94+
"smooth": 10
95+
}
9196
},
9297
"onclick": {
9398
"enable": true,
@@ -106,7 +111,7 @@ particlesJS('particles-js',
106111
"distance": 400,
107112
"size": 40,
108113
"duration": 2,
109-
"opacity": 8,
114+
"opacity": 0.8,
110115
"speed": 3
111116
},
112117
"repulse": {

‎particles.js

Lines changed: 44 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -93,7 +93,12 @@ var pJS = function(tag_id, params){
9393
events: {
9494
onhover: {
9595
enable: true,
96-
mode: 'grab'
96+
mode: 'grab',
97+
parallax: {
98+
enable: true,
99+
force: 2,
100+
smooth: 10
101+
}
97102
},
98103
onclick: {
99104
enable: true,
@@ -261,6 +266,10 @@ var pJS = function(tag_id, params){
261266
if(this.y > pJS.canvas.h - this.radius*2) this.y = this.y - this.radius;
262267
else if(this.y < this.radius*2) this.y = this.y + this.radius;
263268

269+
/* parallax */
270+
this.offsetX = 0;
271+
this.offsetY = 0;
272+
264273
/* check position - avoid overlap */
265274
if(pJS.particles.move.bounce){
266275
pJS.fn.vendors.checkOverlap(this, position);
@@ -423,10 +432,13 @@ var pJS = function(tag_id, params){
423432
pJS.canvas.ctx.fillStyle = color_value;
424433
pJS.canvas.ctx.beginPath();
425434

435+
var p_x = p.x + p.offsetX,
436+
p_y = p.y + p.offsetY;
437+
426438
switch(p.shape){
427439

428440
case 'circle':
429-
pJS.canvas.ctx.arc(p.x, p.y, radius, 0, Math.PI * 2, false);
441+
pJS.canvas.ctx.arc(p_x, p_y, radius, 0, Math.PI * 2, false);
430442
break;
431443

432444
case 'edge':
@@ -526,6 +538,16 @@ var pJS = function(tag_id, params){
526538
p.y += p.vy * ms;
527539
}
528540

541+
/* parallax */
542+
if(pJS.interactivity.mouse.pos_x && pJS.interactivity.events.onhover.parallax.enable){
543+
/* smaller is the particle, longer is the offset distance */
544+
var tmp_x = (pJS.interactivity.mouse.pos_x - (window.innerWidth / 2)) / (pJS.interactivity.events.onhover.parallax.force * p.radius);
545+
p.offsetX += (tmp_x - p.offsetX) / pJS.interactivity.events.onhover.parallax.smooth; // Easing equation
546+
547+
var tmp_y = (pJS.interactivity.mouse.pos_y - (window.innerHeight / 2)) / (pJS.interactivity.events.onhover.parallax.force * p.radius);
548+
p.offsetY += (tmp_y - p.offsetY) / pJS.interactivity.events.onhover.parallax.smooth; // Easing equation
549+
}
550+
529551
/* change opacity status */
530552
if(pJS.particles.opacity.anim.enable) {
531553
if(p.opacity_status == true) {
@@ -560,37 +582,37 @@ var pJS = function(tag_id, params){
560582
}
561583
}else{
562584
var new_pos = {
563-
x_left: -p.radius,
564-
x_right: pJS.canvas.w + p.radius,
565-
y_top: -p.radius,
566-
y_bottom: pJS.canvas.h + p.radius
585+
x_left: -p.radius - p.offsetX,
586+
x_right: pJS.canvas.w + p.radius + p.offsetX,
587+
y_top: -p.radius - p.offsetY,
588+
y_bottom: pJS.canvas.h + p.radius - p.offsetY
567589
}
568590
}
569591

570-
if(p.x - p.radius > pJS.canvas.w){
592+
if((p.x) - p.radius > pJS.canvas.w - p.offsetX){
571593
p.x = new_pos.x_left;
572594
p.y = Math.random() * pJS.canvas.h;
573595
}
574-
else if(p.x + p.radius < 0){
596+
else if((p.x) + p.radius < 0 - p.offsetX){
575597
p.x = new_pos.x_right;
576598
p.y = Math.random() * pJS.canvas.h;
577599
}
578-
if(p.y - p.radius > pJS.canvas.h){
600+
if((p.y) - p.radius > pJS.canvas.h - p.offsetY){
579601
p.y = new_pos.y_top;
580602
p.x = Math.random() * pJS.canvas.w;
581603
}
582-
else if(p.y + p.radius < 0){
604+
else if((p.y) + p.radius < 0 - p.offsetY){
583605
p.y = new_pos.y_bottom;
584606
p.x = Math.random() * pJS.canvas.w;
585607
}
586608

587609
/* out of canvas modes */
588610
switch(pJS.particles.move.out_mode){
589611
case 'bounce':
590-
if (p.x + p.radius > pJS.canvas.w) p.vx = -p.vx;
591-
else if (p.x - p.radius < 0) p.vx = -p.vx;
592-
if (p.y + p.radius > pJS.canvas.h) p.vy = -p.vy;
593-
else if (p.y - p.radius < 0) p.vy = -p.vy;
612+
if ((p.x + p.offsetX) + p.radius > pJS.canvas.w) p.vx = -p.vx;
613+
else if ((p.x + p.offsetX) - p.radius < 0) p.vx = -p.vx;
614+
if ((p.y + p.offsetY) + p.radius > pJS.canvas.h) p.vy = -p.vy;
615+
else if ((p.y + p.offsetY) - p.radius < 0) p.vy = -p.vy;
594616
break;
595617
}
596618

@@ -676,8 +698,8 @@ var pJS = function(tag_id, params){
676698

677699
pJS.fn.interact.linkParticles = function(p1, p2){
678700

679-
var dx = p1.x - p2.x,
680-
dy = p1.y - p2.y,
701+
var dx = (p1.x + p1.offsetX) - (p2.x + p2.offsetX),
702+
dy = (p1.y + p1.offsetY) - (p2.y + p2.offsetY),
681703
dist = Math.sqrt(dx*dx + dy*dy);
682704

683705
/* draw a line between p1 and p2 if the distance between them is under the config distance */
@@ -695,8 +717,8 @@ var pJS = function(tag_id, params){
695717

696718
/* path */
697719
pJS.canvas.ctx.beginPath();
698-
pJS.canvas.ctx.moveTo(p1.x, p1.y);
699-
pJS.canvas.ctx.lineTo(p2.x, p2.y);
720+
pJS.canvas.ctx.moveTo((p1.x + p1.offsetX), (p1.y + p1.offsetY));
721+
pJS.canvas.ctx.lineTo((p2.x + p2.offsetX), (p2.y + p2.offsetY));
700722
pJS.canvas.ctx.stroke();
701723
pJS.canvas.ctx.closePath();
702724

@@ -792,8 +814,8 @@ var pJS = function(tag_id, params){
792814
/* on hover event */
793815
if(pJS.interactivity.events.onhover.enable && isInArray('bubble', pJS.interactivity.events.onhover.mode)){
794816

795-
var dx_mouse = p.x - pJS.interactivity.mouse.pos_x,
796-
dy_mouse = p.y - pJS.interactivity.mouse.pos_y,
817+
var dx_mouse = (p.x + p.offsetX) - pJS.interactivity.mouse.pos_x,
818+
dy_mouse = (p.y + p.offsetY) - pJS.interactivity.mouse.pos_y,
797819
dist_mouse = Math.sqrt(dx_mouse*dx_mouse + dy_mouse*dy_mouse),
798820
ratio = 1 - dist_mouse / pJS.interactivity.modes.bubble.distance;
799821

@@ -1043,7 +1065,7 @@ var pJS = function(tag_id, params){
10431065

10441066
/* path */
10451067
pJS.canvas.ctx.beginPath();
1046-
pJS.canvas.ctx.moveTo(p.x, p.y);
1068+
pJS.canvas.ctx.moveTo(p.x + p.offsetX, p.y + p.offsetY);
10471069
pJS.canvas.ctx.lineTo(pJS.interactivity.mouse.pos_x, pJS.interactivity.mouse.pos_y);
10481070
pJS.canvas.ctx.stroke();
10491071
pJS.canvas.ctx.closePath();
@@ -1541,4 +1563,4 @@ window.particlesJS.load = function(tag_id, path_config_json, callback){
15411563
};
15421564
xhr.send();
15431565

1544-
};
1566+
};

0 commit comments

Comments
 (0)